【明白chrome开发者东西】part1编辑与调试

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