浏览器开发者工具（Developer Tools）详解

作为一名前端开发人员，熟练应用浏览器开发工具很重要。笔者在这方面的知识未成体系，最近在跟着chorme官方文档学习，于是整理了本文，如有不足，欢迎指正。

1.elements(元素)

2.console(控制台)

3.sources(源代码/来源)

作用

1.查看文件&2.编辑css/js

3.创建&保存js代码段(snippets)

4.调试JS

5.设置一个工作区 (Workspace),以便将在 DevTools 中所做的更改保存到文件系统上的代码中。

其他部分

overrides(替换)

content scripts(内容脚本)

4. network(网络)

作用

1.记录网络活动

2.模拟多种网络情况

3.查看页面在加载时随时间的变化情况

4.和source/‘源代码’部分“联动”

本文将讲解dev tools的前4部分：

elements(元素)、console(控制台)、sources(源代码/来源)、network(网络)

其中前两个（elements、console）较为简单且常用，所以不再过多赘述，只做基本讲解

1.elements(元素)

简介：让你看到一个 DOM 树的全部相关信息，并允许你检查以及在传输过程中编辑 DOM 元素。当你需要确认页面某些方面的 HTML 代码段时，你会经常访问元素标签。

这里着重说一下平时比较少见（或我没见过: <）的用法：

1.查看元素属性：在右侧的properties

这里注意：自身的属性是粗体，继承的属性是非粗体

2.几种css的特殊情况：

1）选择器颜色深浅来表示选择器是否匹配：

2.console(控制台)

chorme文档写到，Console（控制台）的主要作用有两个：

1.查看记录的消息（logged messages）

2.运行JS

3.sources(源代码/来源)

source 面板可分为三部分：

1.文件导航器窗格。此处列出了页面请求的每个文件。

2.代码编辑器窗格。在“文件导航器”窗格中选择文件后，该文件的内容将显示在此处。

3.js调试窗格。用于检查页面 JavaScript 的各种工具

作用

chorme文档写到，sources的主要作用有：

1.查看文件

2.编辑css/js

3.创建并保存js代码段(snippets)，您可以在任何页面上运行它。代码段(snippets)类似于小书签。

4.调试js

5.设置一个 Workspace,以便将您在 DevTools 中所做的更改保存到文件系统上的代码中。

接下来我们详细讲解这5部分

1.查看文件&2.编辑css/js

可在‘Page’查看页面已加载的文件，

其中：

1.top代表一个html框架，代表主框架文档

2.第二层代表一个源(origin)

3.第三层以及下面代表从当前源(origin)加载的目录和资源

点开具体的文件，就可以直接进行编辑，并可以生效，但是重新加载页面时，这些更改不会被保存

3.创建&保存js代码段(snippets)

上文我们说到，如果直接修改js文件，只会暂时生效，那么如何保存&运行自定义的代码片段呢？这里我们就用到了代码段(snippets)

我们在snippets中插入下面这段代码并运行

// 修改p标签的内容为'Hello, Snippets!'
console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

源页面&运行代码段后的代码

当我们刷新完页面后，对应的代码段并不会消失，依旧在snippets中。

4.调试JS

我们可以在这里使用断点调试代码，详见：https://developer.chrome.com/docs/devtools/javascript/

5.设置一个工作区 (Workspace),以便将在 DevTools 中所做的更改保存到文件系统上的代码中。

详见：https://developer.chrome.com/docs/devtools/workspaces/

其他部分

source除了上文提到的几部分之外，还有一些其他部分（overrides、content scripts），这里我们进行简单的讲解，不再过多延伸

overrides(替换)

他的作用大致如下：

“

通过overrides，您可以创建一个与原始文件相对应的副本，并在副本中进行修改。这些修改仅应用于DevTools中，不会影响原始文件。这对于调试和实时预览样式和脚本更改非常有用，而无需手动更改文件并刷新网页。

例如，您可以修改CSS样式表，添加/删除样式或更改元素的布局，以查看样式更改后的效果。类似地，您可以修改JavaScript脚本，更改函数的行为或添加调试日志语句。

使用overrides，您可以对页面进行实时调试和修改，而无需更改原始文件。这使得调试和开发过程更加高效和灵活。

”

content scripts(内容脚本)

这个content script(内容脚本)感觉和snippets(代码段)很像，于是去查了下他们的区别：

“

DevTools的content script和snippets在功能和使用方式上有一些区别：

Content Script（内容脚本）：

Content script是在DevTools中与正在调试的页面之间通信的机制。
它可以注入到正在调试的页面中，并与页面的DOM和JavaScript API进行交互。
Content script可以访问和操作页面的DOM，捕获事件，修改样式和行为等。
Content script可以与DevTools面板中的其他组件进行通信，例如扩展的UI面板、Console面板和Elements面板。
Content script运行在页面的上下文中，而不是DevTools的JavaScript环境中。
通过消息传递机制，可以在DevTools和content script之间发送和接收消息。

Snippets（代码片段）：

Snippets是DevTools中的一个功能，允许您编写、编辑和运行JavaScript代码片段。
Snippets是在DevTools中直接运行的独立的JavaScript代码片段，而不是在页面的上下文中运行。
您可以在Snippets面板中创建和保存多个代码片段，并在需要时运行它们。
Snippets面板提供了丰富的开发工具，例如代码编辑器、断点、调试功能和代码执行结果的查看。
Snippets可以访问和操作DevTools的API和功能，例如Console API、Network API等。
Snippets通常用于调试和测试特定的JavaScript代码，或者执行一些与页面无关的任务。

总结： Content script是在页面上下文中与页面进行交互的脚本，而Snippets是在DevTools中运行的独立的JavaScript代码片段。它们的用途和功能有所不同，Content script主要用于页面调试和与页面交互，而Snippets主要用于开发者在DevTools中编写和运行独立的JavaScript代码片段。

”