谷歌开发者工具 -来源/源码篇

这个系列会慢一些，年前完成，有遗漏欢迎各位分享

• 元素篇
• 控制台篇

一、官网

https://developer.chrome.com/docs/devtools/open?hl=zh-cn

二、主要用途

• 查看文件
• 编辑 CSS 和 JavaScript
• 创建和保存 JavaScript 的代码段，您可以在任何页面上运行此代码段。代码段与小书签相似
• 调试 JavaScript
• 设置工作区，以将您在 DevTools 中作出的更改保存到文件系统的代码中

三、来源篇

1.查看文件

（1）网页标签，查看所有加载资源

（2）网页标签页得组织方式

• 顶层（如上图中的 top）表示 HTML 帧。您在访问的每个页面上都可找到 top。top 表示主文档帧。
• 第二层（如上图中的 developers.google.com）表示来源。
• 第三层、第四层等等，表示从该来源加载的目录和资源。

（3）查看文件内容

网页标签中点击文件，即可在编辑器标签页中查看文件内容

2.编辑 CSS 和 JavaScript

编写css 立即生效

编辑 JavaScript需要运行指定函数

3.创建、保存和运行代码段

4.调试 JavaScript

（1）Sources面板介绍

1. 显示文件树的页面标签页。此处列出页面请求的每个文件。
2. Code Editor 部分。在网页标签页中选择文件后，此处会显示该文件的内容。
3. Debugger 部分。检查页面 JavaScript 的各种工具。
   

（2）断点调试

与其使用 console.log() 推断 JavaScript 出错的地方，不如考虑使用 Chrome DevTools 调试工具。其总体思路是在代码中有意停止执行代码的位置设置断点，然后一次一行地单步调试执行代码。
断点还有很多类型如条件/记录/修改断点这里不一一列举出来了，有兴趣可以看文档
https://developer.chrome.com/docs/devtools/javascript/breakpoints?hl=zh-cn

（3）检查变量值

1.作用域变量查看

2.表达式监听，通过表达式针对当前状态做输出

（4）调试小工具栏每个作用

从左至右按顺序介绍
1.继续执行脚本：理解为跳过当前断点继续执行，访问到下一个断点停止
2.跳过下一个函数调用：理解为视觉的按步骤执行，不会进入跳转到执行的内部函数
3.进入下一个函数调用：如果没有函数的情况与2一致，检测到函数会进入函数内部
4.跳出当前函数：检测到处于函数体内部会跳出完成当前函数体
5.单步调试：一步步执行运行逻辑
6.停用断点：停用后按钮变为蓝色，之前创建的断点改为浅蓝且运行不再生效

5.设置工作区

默认情况下，在 Sources 面板中编辑文件后，这些更改内容会在重新加载页面时丢失。您可以通过 Workspaces(工作区tab)，将您在 DevTools 中作出的更改保存到文件系统中。这样，您基本上可将 DevTools 用作代码编辑器。
工作区的文件会自动检测你当前运行的程序，如果匹配上会带有绿色图标

6.搜索源文件打开(ctrl+p)