2023年7月7日发(作者：)

前端调试⼯具详解（⼀）原⽂常⽤的调试⼯具有Chrome浏览器的调试⼯具，⽕狐浏览器的Firebug插件调试⼯具，IE的开发⼈员⼯具等。它们的功能与使⽤⽅法⼤致相似。Chrome浏览器简洁快速，功能强⼤这⾥主要介绍Chrome浏览器的调试⼯具。打开 Google Chrome 浏览器，通过下⾯任何⼀种⽅式进⼊开发⼈员⼯具：

-点击位于浏览器⽤户界⾯右上⾓的“页⾯”下拉菜单，“更多⼯具”→“开发⼈员⼯具”。

-右键点击⽹页上的任⼀元素，在弹出菜单中选择“审查元素”。

-在 Windows操作系统上，使⽤ Ctrl+Shift+I 快捷键打开开发⼈员⼯具（或使⽤ Ctrl+Shift+J 直接进⼊ JavaScript 控制台）。Chrome⼀共有8个功能⼦集。如下图：每⼀个图标点击后都会打开相应的调试⾯板，帮助您获取各种不同的信息，如 DOM 树、资源占⽤情况、页⾯相关的脚本等。通过 Ctrl+[和 Ctrl+] 键，可以在这些项之间进⾏切换。每个模块及其主要功能为：Element 标签页： ⽤于查看和编辑当前页⾯中的 HTML 和 CSS 元素。Network 标签页：⽤于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。Source 标签页：⽤于查看和调试当前页⾯所加载的脚本的源⽂件。TimeLine 标签页： ⽤于查看脚本的执⾏时间、页⾯元素渲染时间等信息。Profiles 标签页：⽤于查看 CPU 执⾏时间与内存占⽤等信息。Resource 标签页：⽤于查看当前页⾯所请求的资源⽂件，如 HTML，CSS 样式⽂件等。Audits 标签页：分析页⾯加载的过程，进⽽提供减少页⾯加载时间、提升响应速度的⽅案，⽤于优化前端页⾯，加速⽹页加载速度等。Console 标签页：⽤于显⽰脚本中所输出的调试信息，或运⾏测试脚本等。学习这个章节，最主要的是多动⼿点点，左击/右击，先点看看，进⽽深⼊学习。⼀.Elements：在元素（Elements）⾯板中，可以看到整个页⾯的 DOM 树结构和每个元素的所有属性（即html和css），同时也可以实时地修改这些元素及其属性，并可以实时看到修改后的效果。-点击，点击页⾯上的元素，显⽰选中元素的HTML代码和样式；-编辑HTML：在⼯具窗⼝左侧是html代码，可通过双击修改现有标签的属性值，也可选中html代码⽚段右击选择“Edit as HTML”进⾏html代码的修改；-编辑属性：在⼯具窗⼝右侧显⽰的是被选元素的样式信息，可以通过双击现有属性来修改该元素的 style 属性或应⽤的某个选择器中的属性值，也可以通过取消勾选的⽅式去掉⼀些属性，同时页⾯实时变化。-添加属性：⿏标双击您所想修改的元素的选择器的空⽩部分，即可添加属性。添加任何属性都必须以分号结束。你也可以直接点击+号，添加新选择器并进⾏属性操作。-可以直接在盒模型上更改margin和padding。-搜索功能：当⼯具⾯板获得焦点后，快捷键ctrl+f会打开搜索框，键⼊元素关键字进⾏搜索。-你还可以对某个元素进⾏监听，在JS对元素的属性或者HTML进⾏修改的时候，直接触发断点，跳转到对改元素进⾏修改的JS代码处：-拖拽节点, 调整顺序。拖拽节点到编辑器：注：像素⼤⼩，可以通过⿏标的滚轮调整，调整单位1px（百分⽐调整单位1%）；按住ALt，调整单位0.1px；同时按住Shift+ALt，调整单位10px。总之，把可以点的都点⼀遍。ed显⽰的是所选元素的最终样式（对应JS中的getComputedStyle()⽅法），Computed Style中的属性是只读的，不能实时修改，所以主要⽤来查看元素的最终属性值。+Event Listeners显⽰了绑定到当前元素的事件监听函数，⽽且会显⽰事件冒泡或捕获（即能够响应此事件的所有元素）。右击标签，审查元素；出现⼯具栏-》菜单 Elements，查看右侧菜单-》EventListeners，查看元素上绑定了哪些事件：默认会列出 All Nodes, 这些包括代理绑定在该节点的⽗/祖⽗节点上的事件, 因为在在冒泡或捕获阶段会经过该节点Selected Node Only 只会列出当前节点上绑定的事件每个事件会有对应的⼏个属性 handler, isAtribute, lineNumber, listenerBody, sourceName, type, useCapture-handler是处理函数, 右键可以看到这个函数定义的位置, ⼀般 js 库绑定事件会包⼀层, 所以这⾥很难找到对应handler-isAtribute 表明事件是否通过 html 属性(类似onClick)形式绑定的-useCapture 是 addEventListener 的第三个参数, 说明事件是以冒泡还是捕 顺序执⾏-右击handler选择“Show function definition”可以进⼊Sources⾥js⽂件中。+DOM Breakpoints这个后⾯再细讲。+PropertiesProperties：显⽰当前元素的DOM属性，按照类的继承层级排列，越靠下层级越⾼。最上⾯是⼀个HTMLDivElement的实例，第⼆个是HTMLDivElement的类。第三个，是HTMLElement类，HTMLDivElement类继承⾃HTMLDivElement类。接着分别是Element类，Node类，和Object类。如果选择不同的节点类型，就会出现不同的继承关系。这个很有⽤，可以让你看到元素具有的⽅法与属性，⽐查API⼿册要⽅便，但要注意某些⽅法和属性在IE、FireFox等其他浏览器下⾯的⽀持情况。⼆.Network请求的每个资源在Network表格中显⽰为⼀⾏，每个资源都有许多列的内容(如红⾊区块1)，不过默认情况下不是所有列都显⽰出来。Name/Path: 资源名称以及URL路径；Method: HTTP请求⽅法；Status/Text: HTTP状态码/⽂字解释；Type: 请求资源的MIME类型；Initiator解释请求是怎么发起的，有四种可能的值：Parser：请求是由页⾯的HTML解析时发送的；Redirect：请求是由页⾯重定向发送的；Script：请求是由script脚本处理发送的；Other：请求是由其他过程发送的，⽐如页⾯⾥的link链接点击，在地址栏输⼊URL地址。Size/Content: Size是响应头部和响应体结合起来的⼤⼩，Content是请求内容解码后的⼤⼩。进⼀步了解可以看这⾥Chrome DevTools - “Size” vs “Content”；Time/Latency: Time是从请求开始到接收到最后⼀个字节的总时长，Latency是从请求开始到接收到第⼀个字节的时间；Timeline: 显⽰⽹络请求的可视化瀑布流，⿏标悬停在某⼀个时间线上，可以显⽰整个请求各部分花费的时间。以上是默认显⽰的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显⽰或者隐藏更多的列，⽐如Cache-Control,Connection, Cookies, Domain等。我们可以按照上⾯任意⼀项来给资源请求排序，只需要单击相应的名字即可。Timeline排序⽐较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Duration、Latency中的⼀项来排序。红⾊区块2中，⼀共有6个⼩功能：Record Network Log: 红⾊表⽰此时正在记录资源请求信息；Clear: 清空所有的资源请求信息；Filter: 过滤资源请求信息；Use small resource raws: 每⼀⾏显⽰更少的内容；Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；Disable cache: 不允许缓存的话，所有资源均重新加载。选择Filter后，就会出现如红⾊区块3所显⽰的过滤条件，当我们点击某⼀内容类型(可以是Documents, Stylesheets, Images, Scripts,XHR, Fonts, WebSockets, Other)后，只显⽰该特定类型的资源。在XHR请求中，可以在⼀个请求上右键选择“Replay XHR”来重新运⾏⼀个XHR请求。有时候我们需要把Network⾥⾯内容传给别⼈，这时候可以在资源请求⾏的空⽩处右键然后选择Save as HAR with Content保存为⼀个HAR⽂件。然后可以在⼀些第三⽅⼯具⽹站，⽐如这⾥重现⽹络请求信息。选定某⼀资源后，我们还可以Copy as cURL，也就是复制⽹络请求作为curl命令的参数，详细内容看 Copying requests as cURLcommands此外，我们还可以查看⽹络请求的请求头，响应头，已经返回的内容等信息，如下图：资源的详细内容有以下⼏个：HTTP request and response headersResource preview: 可⾏时进⾏资源预览；HTTP response: 未处理过的资源内容；Cookie names and values: HTTP请求以及返回中传输的所有Cookies；WebSocket messages: 通过WebSocket发送和接收到的信息；Resource network timing: 图形化显⽰资源加载过程中各阶段花费的时间。注：XPath 是⼀门在 XML ⽂档中查找信息的语⾔。XPath ⽤于在 XML ⽂档中通过元素和属性进⾏导航。⽐如，这⾥这⾥a标签的Xpath为：/html/body/div[2]/p[1]/a，解读为：html⾥⾯body标签的第⼆个div标签的第⼀个p标签下的a标签。三.Sources⽤于查看和调试当前页⾯所加载的脚本的源⽂件。-通过左边的内容源，打开对应的 JavaScript ⽂件，⿏标点击⽂件的⾏号就可以设置和删除断点。添加的每个断点都会出现在右侧调试区的Breakpoints 列表中，点击列表中断点就会定位到内容区的断点上。如果你有多个⽂件、多个断点的话，利⽤ Breakpoints 列表中的断点快速定位⾮常⽅便。-对于每个已添加的断点都有两种状态：激活和禁⽤。刚添加的断点都是激活状态，禁⽤状态就是保留断点但临时取消该断点功能。在Breakpoints 列表中每个断点前⾯都有⼀个复选框，取消选中就将禁⽤该断点。断点位置的右键菜单中也可以禁⽤断点。也可以在右侧功能区上⾯按钮临时禁⽤所有已添加的断点，再点⼀下恢复原状态。-条件断点：在断点位置的右键菜单中选择“”可以设置触发断点的条件，就是写⼀个表达式，表达式为 true 时才触发断点。-很多代码是压缩/混淆过的，点击“{}”可以格式化代码，再点⼀下就取消格式化。。-在断点调试时，可以⽤⿏标选择想要查看的变量或表达式，然后右键菜单执⾏“Evaluate in Console”，就可以看到该表达式的当前的值了。1.代码断点设置断点：在 Sources ⾯板 js ⽂件⾏号处设置断点, 这⾥除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断电, 在循环中需要断点时⽐较有⽤.断点后可以查看 堆栈, 变量 信息:在调⽤堆栈这⾥可以切换到堆栈中的任何地⽅重新执⾏(右键restart frame), 如果想查看断点前的信息时⽐较有⽤.断点后的变量保存到全局选中变量, 右键 Evalute in console在 console 中选中输出的内容, 右键 store as global variable2.事件断点元素上事件断点：某⼀事件/某类事件devtools 可以查看某⼀个元素上绑定了哪些事件: Elements > Event 断点⼀般是 dom 结构改变时触发。 有时候我们需要监听某个 DOM 被修改情况，⽽不关⼼是哪⾏代码做的修改（也可能有多处都会对其做修改）。那么我们可以直接在 DOM 上设置断点。如图所见，在元素审查的 Elements Panel 中在某个元素上右键菜单⾥可以设置三种不同情况的断点：⼦节点修改⾃⾝属性修改⾃⾝节点被删除选中之后，Sources Panel 中右侧的 DOM Breakpoints 列表中就会出现该 DOM 断点。⼀旦执⾏到要对该 DOM 做相应修改时，代码就会在那⾥停下来。对上⾯元素上事件断点(mouseover) 后不容易找到业务代码, 使⽤ mutation 断点, 断点后配合 call stack 就可以找到业务代码了, 如下图这种情况使⽤全局搜索(ctrl + shift + f) 代码中 css classname 也能找到业务代码, 然后直接断点也可以。 断点右侧调试区有⼀个 XHR Breakpoints，点击+ 并输⼊ URL 包含的字符串即可监听该 URL 的 Ajax 请求，输⼊内容就相当于 URL 的过滤器。如果什么都不填，那么就监听所有 XHR 请求。⼀旦 XHR 调⽤触发时就会在 () 的地⽅中断。5.全局事件断点devtools 还可以对事件发⽣时断点, ⽐如 click 发⽣时断点, 这个跟 元素上事件断点 不同, 不会限定在元素上, 只要是事件发⽣, 并且有handler 就断点; 还可以对 resize, ajax, setTimeout/setInterval 断点.下⾯这个图是 resize 时中断, 因为库都代理了, 还需要在断点处⼀步⼀步跟下去才能⾛到业务代码中.//@ sourceURL 给 eval 出来的代码命名有时候⼀些⾮常动态的代码是以字符串的形式通过 eval() 函数在当前 Javascript context 中创建出来，⽽不是作为⼀个独⽴的 js ⽂件加载的。这样你在左边的内容区就找不到这个⽂件，因此很难调试。其实我们只要在 eval 创建的代码末尾添加⼀⾏ “//@sourceURL=name“ 就可以给这段代码命名（浏览器会特殊对待这种特殊形式的注释），这样它就会出现在左侧的内容区了，就好像你加载了⼀个指定名字的 js ⽂件⼀样，可以设置断点和调试了。下图中，我们通过 eval 执⾏了⼀段代码，并利⽤ sourceURL 将它命名为 ，执⾏后左侧内容区就出现了这个“⽂件”，⽽它的内容就是 eval 的中的内容。还可以看看这个给动态编译出来的 CoffeeScript 代码命名的⽰例：var coffee = e()+ "//@ sourceURL=" + ( || "Coffeeeeeeee!");eval(coffee);实际上，//@ sourceURL 不仅仅可以⽤在 eval 的代码中，任何 js ⽂件、甚⾄是 Javascript Console 输⼊的代码都可以⽤，效果⼀样！⼏个常⽤的断点快捷键:F8: 继续执⾏F10: step over, 单步执⾏, 不进⼊函数F11: step into, 单步执⾏, 进⼊函数shift + F11: step out, 跳出函数ctrl + o: 打开⽂件ctrl + shit + o: 跳到函数定义位置ctrl + shift + f: 所有脚本中搜索四.TimeLine⽤于查看脚本的执⾏时间、页⾯元素渲染时间等信息。可结合Profiles进⾏JavaScript性能分析。在开始做性能优化的时候要设置⼀个基线，来明确这个页⾯的速度到底怎样。在时间线(timeline)标签下开始记录，载⼊页⾯然后停⽌记录，这样就设置了⼀个基线。（打开chrome开发者⼯具，点击“时间线”标签，然后点击窗⼝底部圆形的⿊⾊“记录”图标开始记录）。chrome是智能的，只有页⾯开始载⼊的时候才会开始记录。⼀般多记录⼏次（约三次）然后取了平均值。