摘要：类似一个文本编辑器。显示请求瀑布流。基于平均水平的网络速度和设备性能作出的评估。方便开发者少用鼠标。而在面板中是打开具体文件。顾名思义，观察这个断点发生之前，被调用过的函数。在开发者工具的中，我们可以设置永久名单。
简单复习各个面板 Elements
浏览DOM树，浏览样式。
Console一个REPL。
小技巧： 在任何非Console面板中，按ESC可以调出一个小的Console窗口，方便开发者Debug。
Sources类似一个文本编辑器。右边有一个Debugger，我们可以用它来Debug，可以做比console.log更复杂的事。
Network显示请求瀑布流。
Performance我们可以Record一些操作，然后在这个面板中查看一些信息。
Memory查看页面的内存占用具体情况，可以定位内存泄漏原因。
Application显示各种浏览器储存情况，比如local storage， Session Storage，cookie。 查看网站储存了用户的哪些信息。
Security查看安全证书，连接是否安全。
Audits网站性能的总结，整合了google自家的Lighthouse功能。基于平均水平的网络速度和设备性能作出的评估。
深入各个面板 编辑 Editing 元素和样式我们可以点击Elements面板中的HTML文本，做更改，也可以点击CSS属性，做更改。
在Elements面板，按住option点击展开一个元素节点的箭头会展开当前节点下的所有子节点。
在Elements面板，我们长按一个节点可以移动该节点在DOM树中的位置。
右键一个DOM节点，选择Scroll into view，可以迅速找到页面中节点的位置。
选择一个DOM节点，按“H”隐藏这个节点，调整的是visibility属性。如果visibilty在CSS中被标记了!important则不能被隐藏。按“delete”删除这个节点，ctrl+z撤销删除。
在Style面板中，我们按住Shift点击一个颜色块，我们可以更改颜色的表达格式，在HEX，RGB，HSL间切换。
在Style面板中，我们可以左键点击一个颜色块，调出调色板。这个调色板有一个最大的好处就是里面总是保存了Material Design的配色,方便了开发者选择颜色。
在DOM树中选择一个节点，在右边样式面板中点击:hov，可以选择强制触发各种鼠标事件，方便开发者检查触发事件时的CSS属性。
元素节点有的时候我们会发现一个元素节点有好几个CSS选择器，比如浏览器有默认样式，你自己写了一个样式，你又用了一个CSS库比如Bootstrap加了另一个样式。我们可以点击Computed面板，来检查最后有用的样式是哪些。
在Event Listeners面板中，我们可以观察该节点的所有事件。如果我们点击旁边的JS文件名，会跳转到Source面板展示事件处理函数的实现代码。
当Source面板中的代码格式是被压缩过的时候，我们点击左下角的大括号{}“Pretty Print”按钮，可以美化代码样式。
DOM断点。右键点击一个元素节点，选择Break On。我们有三种Debug的选择，为什么这个节点被删除(node removal)，为什么这个节点的某种属性发生了变化(attribute modification)，或者为什么这个节点的子节点发生了变化(subtree modification)。当代码触发断点的时候，Sources面板会自动打开，展示引发节点变化的具体代码。
更改本地文件在Sources面板中，选择Filesystem面板，我们可以打开本地的workspace。然后我们再前往Elements面板中调试CSS样式，会发现一些CSS文件图标被标上了绿色圆点，这就表示现在我们在Devtool做的调试，本地的文件也会被更改，Sass也有用，但是使用webpack的项目不一定支持这个功能。
但是在Elements面板左边的DOM树中做更改，不会改变本地的HTML文件。因为DOM树只是浏览器根据我们写的HTML生成的，并没有直接更改HTML文件的能力。如果我们想要更改HTML和JS文件，我们可以在Sources面板中做到，就像使用文本编辑器一样。
选择元素历史在Elements面板中左键点击选择一个节点，然后进入Console面板，输入:
$0
就会返回刚才最近选择的一个节点。以此类推，$1会返回第二近选择的一个节点。
说到$符号，Console里也可以使用类似Jquery的$选择器,输入$,按回车，就会返回Jquery选择器函数。
调试 Debug小技巧：在开发者工具的任意面板按ctrl+shift+P，我们可以打开一个命令行，里面有很多常用Dev Tool操作。方便开发者少用鼠标。而在Sources面板中ctrl+P是打开具体文件。
断点在Sources面板中打开一个JS文件，我们可以在代码中加入
debugger;
来打断点。我们还可以直接点击代码行数来打断点，行数会变蓝。当代码运行到断点的时候，我们会在调试操作面板中看到“Paused on breakpoint“的提示。注意断点是在该行代码执行前断而不是之后。
除了常见的Step over, Step into功能按钮，我们还有一些其他面板。
Watch 我们可以在Watch中添加任何变量。可以观察该变量在当前断点的作用域中是defined还是undefined。
Call Stack 顾名思义，观察这个断点发生之前，被调用过的函数。
Scope 观察当前作用域中我们所有可以调用的变量。如果知道要具体看哪个变量还是用Watch比较方便。
Breakpoints 告诉我们目前可用的断点。我们可以取消打勾来取消断点。
XHR/fetch Breakpoint 加入自定义请求断点，在特定URL请求发生的时候打断。然后可以在Call Stack面板中找到涉及到这个请求的代码文件。
Blackbox功能当我们使用很多库的时候，比如React，d3.js。如果我们在调试面板中看到了一些文件名属于第三方库，我们可以右键点击然后Blackbox它。意思是我们不需要看到第三方库的代码运行过程。在开发者工具的setting中，我们可以设置永久Blackbox名单。
条件性断点当一个函数被经常调用，但是只在特定情况下出错的时候。我们可以使用条件性断点。比如我们只想要在ajax函数被传入特定参数的时候才打断，而不是所有ajax call都打断让我们看。我们可以右键点击一个行数，选择Conditional Breakpoint然后我们可以输入参数条件。这种断点，行数会变成黄色。
官方文档
Chrome Developer Tool
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/104526.html
摘要：发布于之后，采用了完全不同的方式，使用函数定义任务。它允许开发者使用它们的补丁和更新来修复这些安全漏洞。提供了工具用于扫描依赖来监测漏洞。是一个开源诊断工具，用于和应用。是和开发的一款新的包管理工具。与相比，它解决了安全性能以及一致性问题。 译者按: 最全的JavaScript开发工具列表，总有一款适合你！ 原文: THE ULTIMATE LIST OF JAVASCRIPT TOO...
摘要：本文作者王仕军，商业转载请联系作者获得授权，非商业转载请注明出处。想知道我接下来会写些什么欢迎订阅我的掘金专栏或知乎专栏前端周刊让你在前端领域跟上时代的脚步。 showImg(https://segmentfault.com/img/remote/1460000009407536?w=592&h=314); 共 2127 字，读完需 4 分钟。我本周读到 1 篇比较有趣的文章叫做《Th...
摘要：更好的断点控制启用禁用重新启用可以在调试视图中的断点区域设置。编辑器边距中的断点一般用红色的实心圆表示。前端开发必备插件功能性插件匹配标签，关闭对应的标签。这可以使得团队内的书写更为规范且具有一致性。 Visual Studio Code是个现下比较流行的编辑器，启动非常快，完全可以用来代替其他文本文件编辑工具。又可以用来做开发，支持各种语言，相比其他IDE，轻量级完全可配置还集成Gi...
摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。 写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出 想必大家都在用console.log在控制...
摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。 写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出 想必大家都在用console.log在控制...
阅读 614·2023-04-26 00:13
阅读 2181·2021-11-23 10:08
阅读 2264·2021-09-01 10:41
阅读 1997·2021-08-27 16:25
阅读 3887·2021-07-30 15:14
阅读 2154·2019-08-30 15:54
阅读 739·2019-08-29 16:22
阅读 2627·2019-08-26 12:13
