Chrome DevTools - Sources来源/源码篇
- 一、官网
- 二、主要用途
- 三、来源篇
- 1.查看文件
- （1）网页标签，查看所有加载资源
- （2）网页标签页得组织方式
- （3）查看文件内容
- 2.编辑 CSS 和 JavaScript
- 3.创建、保存和运行代码段
- 4.调试 JavaScript
- （1）Sources面板介绍
- （2）断点调试
- （3）检查变量值
- 1.作用域变量查看
- 2.表达式监听，通过表达式针对当前状态做输出
- （4）调试小工具栏每个作用
- 5.设置工作区
- 6.搜索源文件打开(ctrl+p)
这个系列会慢一些，年前完成，有遗漏欢迎各位分享
- 元素篇
- 控制台篇
一、官网
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面板介绍
- 显示文件树的页面标签页。此处列出页面请求的每个文件。
- Code Editor 部分。在网页标签页中选择文件后，此处会显示该文件的内容。
- 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 用作代码编辑器。
工作区的文件会自动检测你当前运行的程序，如果匹配上会带有绿色图标
