发条js调试⼯具_Chrome开发者⼯具详解chrome开发者⼯具最常⽤的四个功能模块：元素(ELements)、控制台(Console)、源代码(Sources)，⽹络(Network)。
元素(Elements)：⽤于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显⽰。⼤⼤⽅便了开发者调试页⾯
控制台(Console)：控制台⼀般⽤于执⾏⼀次性代码，查看JavaScript对象，查看调试⽇志信息或异常信息。还可以当作Javascript API查看⽤。例如我想查看console都有哪些⽅法和属性，我可以直接在Console中输⼊"console"并执⾏
源代码(Sources)：该页⾯⽤于查看页⾯的HTML⽂件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
⽹络(Network)：⽹络页⾯主要⽤于查看header等与⽹络连接相关的信息。
1、元素(Elements)：
这个部分主要是显⽰实时的DOM树。在页⾯中右键单击" 审查元素 "，就会出现Elements的⾯板。
查看元素的代码：点击左上⾓的箭头图标(或按快捷键Ctrl+Shift+C)进⼊选择元素模式，然后从页⾯中选择需要查看的元素，然后可以在开发者⼯具元素(Elements)⼀栏中定位到该元素源代码的具体位置
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出该元素的属性。如下图中的class、src、width等属性的值。
在⼀个DOM节点上点击右键就会出现⼀个菜单，⼀共分为4部分
第⼀部分是添加和编辑节点的属性，例如class等。
第⼆部分是编辑节点，点击Edit as HTML，就可以像在编辑器中⼀样编写代码，Copy as HTML就是复制代码了，Delete node是整个删除节点。
第三部分是添加DOM的断点(给元素添加断点)
如果我们添勾选了任何⼀个，就会在右边栏的第五部分DOM breakpoints出现，这个页⾯可以看到当前⽹页的所有元素断点。当元素被修改(通常是JS代码修改)，如果出现对应的事件(节点⼦树改变、节点属性改变、节点被移除)，那么页⾯加载就会暂停，JS就会在相应的事件监听函数那⾥挂起。
底部显⽰的是⼀个当前元素的所有祖先元素。例如，上图中当前元素是body，它的祖先元素是html(也是⽗级元素)，如果html有⽗级元素，仍然会显⽰html的⽗级元素(这⾥例⼦有点特殊)。
网站底部代码js特效
接下来看看右边栏。⼀共有6部分，分别是：Computed Style、Styles、Metrics、Properties、DOM Breakpoints、Event Listeners。Computed Style显⽰的是所选元素的最终样式，如果勾选了Show all，将会显⽰此元素的所有style属性，Computed Style 中的属性是该元素经过计算之后的所有CSS属性，即最后浏览器渲染页⾯时使⽤的属性是只读的，不能实时修改，所以主要⽤来查看元素的最终属性值，属性的计算由浏览器⾃动进⾏，是浏览器渲染页⾯的⼀个必不可少的过程。
⽽第⼆部分Styles估计是⽤得最多的。这⾥会显⽰作⽤在所选元素的所有css规则，包含css⽂件中的样式规则，还有user stylesheet和user agent stylesheet的样式。样式按照权重的⼤⼩排列，最上⾯的是权重最⾼的，下⾯是权重低的。最上⾯的element.style是元素的内嵌样式。user stylesheet是⽤户样式，不过⼀般不会有⼈⾃定义样式。user agent stylsheet是浏览器的默认样式，通常的css reset就是将这个reset掉。背景不是灰⾊的部分是可以修改的样式，我们对样式的修改会实时显⽰在页⾯中，这就省去了我们为了修改⼏个像素去修改css⽂件然后保存刷新的过程，同时也可以禁⽤和启⽤某些样式。在Styles的标题栏有⼀个⿏标箭头的图标，点击之后就会出现伪类，因为⼀般情况下不会出现伪类的css规则。
2、控制台(Console)
先上图：不知道有多少⼈发现，在浏览器开发⼯具的"Console"上的百度⾸页的关于百度招聘的信息：
Console⾯板在开发⽤来调试的时候⽐较多
api功能：
控制台的核⼼对象是Console，如果我想查看console都有哪些⽅法和属性，我可以直接在Console中输⼊"console"并执⾏；或者⽤"console.dir(console)"，同样可以实现查看console对象的⽅法和属性；
我们可以⽤console来调试js代码：
对于某个功能不好使的时候开发就会先看看控制台有没有报错，控制台⾯板中⼀般会打印⼀些报错信息，类似于APP⽇志⼀样，可以定位到哪个⽂件，帮助我们定位问题。
代码执⾏到161⾏，如果想打印下"result"，就可以在Console中进⾏调试，输⼊代码："alert("result="+result);"回车即可，即可弹出result的结果；
或者是输⼊代码"console.log("result="+result);"直接打印结果也可，如下图：
对于⼀些简单的js语句，可以直接在控制台中输⼊来查看结果：
3、Sources⾯板：
打开sources⾯板；直接给某⾏js代码设置断点。
刷新页⾯后，程序就会停在断点设置的那⼀⾏上。
然后我们就可以在断点那⼀⾏代码的后⾯添加我们⾃⼰的debug代码了，例如下⾯这样：
按下快捷键Ctrl + s保存，发现该⾯板变红了，即表⽰保存⽣效：
在单步调试过程中直接查看变量：
1、通过Sources - Watch⾯板，在这⾥设置想要监控的变量，随着单步调试的进⾏，这些被监控的变量的值也会随之更新。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。