Chrome 控制台使用手册专栏【六】Sources Panel

wangsd
2,952 阅读17分钟

Sources Panel 记录当前页面所有引用关联的文件资源，通过面板可以查看文件内容、修改文件内容、js调试等。开发过程中最常用来打断点查看任务执行顺序进行调试。

使用 Sources Panel 可以：

查看文件

基础

选中Sources面板， 面板分为三部分：文件查看面板、代码查看面板、调试面板

image.png

在文件面板选择Page，查看当前页面所有的文件资源。选中一个文件，在代码面板展示文件内容。

image.png

右侧顶部展示已打开文件列表tab，点击x 关闭文件查看

image.png

右击文件tab，弹出更多操作，如关闭文件查看，关闭所有文件查看等

image.png

文件树节点类型：

image.png

  • 窗体节点 image.png。top表示顶级窗体，代表一个html框架，如果内容包含ifram，则会展示对应窗体节点。例如插入一个承载 http://localhost:3030/ 的iframe，文件树展示一个 localhost/ 窗体节点

image.png

image.png

  • 域名节点 image.png，文件所属的域名地址

  • 目录节点 image.png，文件所在目录

  • 文件节点 image.pngimage.pngimage.pngimage.png，通过颜色区分不同文件类型，点击文件可在右侧面板展示文件内容。如果是图片文件（包括svg），则可以直接预览图片，鼠标右击图片，还可以复制图片/导出图片等操作。

image.png

格式化查看文件

如果文件内容被压缩，可以通过image.png 格式化文件，以新的tab页展示（文件名:formatted)

查看文件，未格式化

image.png

格式化文件后

image.png

格式化后的文件也允许进行断点，可能出现断点打不上问题，或者不能在调用函数前打断点

展开/收缩

image.png

打开面板设置 Setting image.png

勾选 Code folding 开启展开/收缩按钮（建议打开）

image.png

勾选 Bracket matching 开启括号匹配提示（建议打开）

  • 未勾选，鼠标聚焦左括号，对应右括号未标识

image.png

  • 勾选，鼠标聚焦左括号，对应右括号带标识 image.png

编辑css、js文件

编辑css

查看 .css 文件，可以直接在查看文件上聚焦，对css样式进行修改，修改后会立即生效，不需要保存

image.png image.png

直接添加一个 body { background: red }，样式立即生效

image.png

编辑js

查看.js 文件，可以直接在查看文件上聚焦，对js代码进行修改，但是，js文件修改需要按住Ctrl + S / Command + s 进行保存。DevTools 不会重新运行脚本，因此只有在 函数内部进行更改才会也才有机会生效。

所以，如果 console.log('A') 不会执行，而 console.log('B') 需要事件触发才会执行

image.png

当重新加载页面时，DevTools 会删除对 CSS 和 JavaScript 的更改。

创建/保存/允许 js片段（Snippets）

片段（Snippets）是可以在任何页面上运行的js脚本。DevTools 将片段（Snippets）代码段保存到文件系统，需要执行的时候通过点击执行就可以，无须重复编写js代码。

因此，主要用途于：当你需要在多个页面执行同一段js代码，可以先在片段（Snippets）中创建，然后依次在需要的页面点击执行，而不需要每个页面都在console控制台写入。

查看片段

查看支持的片段（Snippets）代码，点击Sources->Snippets，左侧展示已有的js片段，点击可以查看具体js代码

image.png

也可以通过 Crtl+shift+p 打开命令行输入 Show Snippets 打开面板

image.png

新增/修改片段

Snippers 面板控制

点击 New snippet ，列表新增一个片段，自动聚焦名称输入框修改，默认名称Script snippet #[id]，同时右侧自动展示新片段编辑面板

image.png

输入片段内容，名称自动带上 * 标志，标识文件未保存，需要点击Ctrl + s 进行保存

image.png

查看任意片段，可直接在面板上聚焦进行修改，需要手动保存

image.png

命令行控制新增

Crtl+shift+p 打开命令行输入 Create new snippet

image.png

自动打开 Snippets 面板选中新建的snippet

image.png

执行片段

点击选中一个片段，点击image.png或者直接按 Ctrl + Enter 执行片段，或者右击片段，点击 Run 执行

image.png

image.png

执行完后，片段列表会打上小绿点标识已执行过该片段，可重复执行

image.png

其他操作

右击片段，弹出操作菜单

image.png

  • Run 执行片段
  • Rename 片段重命名
  • Remove 删除片段
  • Save as 保存片段到本地

设置workspace

默认情况下，在Sources面板中编辑文件时，这些更改会在您重新加载页面时丢失。而workspace使您能够将在 DevTools 中所做的更改直接保存到文件系统中。本质上，DevTools 充当代码编辑器，在可以在本地开发中使用。

限制

如果使用的是现代框架（如Vue、React等），它可能会将您的源代码从易于维护的格式转换为经过优化以尽可能快地运行的格式（Webpack格式化转换）。Workspaces 通常能够借助Source Maps将优化后的代码映射回原始源代码。但是框架之间在使用Source Maps方面存在很大差异，因此 Devtools 根本无法支持所有的转换。

明确表示，Workspaces 不适用于以下框架：

  • Create React App

所以最好就用来修改原生HTML、JS、CSS即可，其他还是使用编译器

第一步 设置

配置一个本地运行环境，模拟服务器在浏览器打开页面

设置本地运行环境

1.使用Node的Express搭建本地服务器

传送门-Express Web搭建参考

2.使用Node的Koa中间件搭建本地服务器，使用koa-static中间件配置静态资源目录，快速访问页面（这只是为了快速打开页面而已）

传送门-Koa 实践

3.使用Vscode 插件工具（如Live Serve)

image.png

右击html文件，选择Open with live server

image.png

以服务器方式打开文件

image.png

允许修改url的host以及端口port

image.png

image.png

使用 settings.json 修改host/port

image.png

修改后重新启动

image.png

后续操作以示例test.html为主

image.png

设置开发工具

选择Sources->Filesystem image.png

点击+Add folder to workspace，选择项目目录打开

image.png

需要授权访问，点击 允许

image.png

授权目录访问，在workspace会展示目录，右击目录可以新增文件、移除目录、打开本地文件地址等操作

image.png

右击workspace文件，支持对文件进行重命名、复制、删除等操作

image.png

点击文件，可以在右侧展示文件内容，并进行修改。*号表示有修改还未保存，可以按 Ctrl+s 进行保存。

image.png

保存后查看本地文件，发现已同步修改

image.png

css保存到磁盘

选择一个css文件 或者 新增一个css文件，进行样式修改，能够实时反映到页面上，按下 Crtl+s 保存修改，自动同步到本地文件上。

image.png

HTML保存到磁盘

选择一个html文件 或者 新增一个html文件，对文件进行修改，修改并不会立即生效，需要先按下 Ctrl+s 进行保存，然后重新加载页面（刷新），就能看到修改内容。如果是新增文件，则需要修改一下url地址。

image.png

保存后刷新页面效果

image.png

注意

通常我们直接在Element面板上进行修改，但是刷新页面后就会还原，DevTools并没有保存修改。原因是，我们从Element面板上看到的内容是DOM Tree，我们实际上是在DOM Tree上对DOM节点进行修改，而不是原HTML文件，并不能保存。
简单来说 DOM Tree !== HTML

而workspace修改html文件是修改源文件，因此刷新后能够保存修改内容。

js保存到磁盘

选择js文件 或者 新增一个js文件，对文件进行修改，js文件的修改也并不会立即生效（包括调用函数的修改未保存也不会生效），需要先 Crtl+s 保存后，重新加载页面才能生效（保存会自动刷新）

image.png

未保存，未执行修改内容

image.png

保存后自动刷新，显示修改结果

image.png

Quick source

除了通过workspace 面板打开文件编辑，还可以通过控制面板命令打开Quick source进行文件编辑。

使用Ctrl+shift+p 打开命令行输入 Show Quick source

image.png

打开 Quick source 面板

image.png

按 Command+P (Mac) 或 Control+P（Windows、Linux、Chrome OS）打开“打开文件”对话框。

image.png

从列表选择一个修改文件，允许输入查询。选择文件后，Quick source面板展示文件内容，可以直接在上面进行修改。

image.png

进行文件修改，对文件加*展示，提示保存。保存后自动重载页面

image.png

禁用js

使用Ctrl+shift+p 打开命令行输入 javascript

image.png

选择 Disabled Javascript 开启禁用javascript（关闭禁用 Enable Javascript）

Sources 面板出现警号提示已警用javascript

image.png

重新启用javascript，需要从命令行选择 Enable Javascript

开启设置也支持禁用js

image.png

调试js

对比console.log

console.log

  • 最常用的调试手段，肯定不会少了console.log这个方法，需要在本地代码中插入大量的console.log语句，然后重新执行代码，然后只能根据console.log设置打印的内容来定位程序出错的位置，最后在修改代码。

  • 这个方式是可行，但是对于复杂逻辑来说很难一次就能准确定位到错误位置，可能需要多次设置console.log。

  • 如果一些错误是由使用框架引起的问题就很难准确追踪到，基本只能调整代码重新实现。

反观 断点调试

  • 可以在代码执行过程中暂停代码，并及时追踪每个时刻的所有变量值，更好的发现一些潜在变量值隐藏的程序问题。不需要为了调试而在代码中注入大量的console.log（后面还要一个一个删除）。

  • 断点能够追踪代码的执行过程，能够深入框架代码执行，更快地发现和修复错误。

发现错误

计算两个输入值x、y的和x+y，实际返回的是两个值的拼接xy，这时发现程序错误

image.png

打开Source面板，选择对应代码逻辑的文件，查看文件内容

image.png

设置断点

点击代码行号，即可以打上断点（蓝色高亮），同一行代码也允许进行行断点（浅蓝色），点击蓝色高亮

image.png

设置完断点后，需要重新刷新页面，当执行到第一处断点是，程序会挂起。

image.png

当前断点所在代码行会高亮展示，同时页面弹出断点工具栏。

image.png

image.png

调试面板显示页面当前的状态内容，包括相关变量值，断点位置信息，watch监听器，函数堆栈信息

image.png

右击行号断点，可以取消断点，编辑断点，禁用当前断点

image.png

编辑断点，可以修改断点类型

image.png

Logpoint 断点，粉色高亮，重新执行js代码，将不再这个断点挂起

image.png

断点执行执行

断点执行方式：

image.png

  • image.png：进入下一个断点。该方式追踪代码只取决断点位置，从第一个断点的js代码开始追踪到最后一个断点的js代码执行完结束。

  • image.png：进入下一个断点或者进入下一调用个函数语句之前。该方式可以追踪所有函数调用之前的代码，及时没有对调用语句进行断点。所以能够进入框架代码查看内部函数调用相关代码。

  • image.png：进入下一个断点或者进入下一个调用个函数语句之前或者进入下一个调用函数内部代码。该方式不仅可以追踪所有函数调用之前的代码，也能进入调用函数内部追踪函数的执行。同样能够进入框架代码查看内部函数调用相关代码，相比上一个追踪更广。

  • image.png：进入下一个断点或者跳出调用函数内部代码追踪（从image.png跳进的追踪），配合image.png执行方式，用来追踪较为底层的代码。

  • image.png：进入下一句js执行代码。这是最小粒度的代码追踪，追踪下一句执行的js语句，能够进入框架代码。从第一个断点的js代码开始追踪到最后一句js代码（不一定是你最后一处断点的位置）执行完后结束。

  • 将所有代码运行到某一行，点击你需要断点的某行代码，然后右击选择Continue to here ，会自动运行到此行并断点（期间有其他断点会被挂起）

image.png

所有执行方法都可以混合使用

具体差异比较

这里比较的基础是只点击同一种执行步骤

  • 比较 image.png 和 image.png

当前断点位置在 131 行。

image.png

点击image.png进入 133 行

点击image.png先进入 132 行（有函数调用语句），然后在点击一次才进入133 行

  • 比较 image.png 和 image.png

当前断点位置在 131 行。

image.png

点击image.png先进入 132 行（有函数调用语句），然后在点击一次才进入133 行

点击image.png先进入 132 行（有函数调用语句），再点击一次跳到 138 行（调用函数内容），一直点击会追踪函数内部所有代码行，追踪到最后一行后再点击一次才进入133 行

如果不需要追踪调用函数内部所有行或者想跳出函数，可以点击image.png跳出函数进入 133 行

检查变量值

Scope 观察变量值

观察innerAdd计算结果result，可以找到代码问题，实际innerAdd两个参数都是字符串，所以是做了字符串拼接而不是加运算

image.png

Watch 新增表达式观察变量值

在watch面板添加表达式，实时检测表达式的值

image.png

恢复执行

如果已经找到错误代码所在位置，接着使用代码编辑器修改文件，然后重新运行来查看修复结果。可以直接在Sources上修改验证结果（仅限错误在调用函数内部，否则刷新修改不能保存）。

  • 强制执行，长按image.png，然点击image.png

image.png

  • 点击 image.png 禁用所有断点，js代码跳过断点正常执行，图标变为 image.png， 同时行号断点高亮半透明

image.png

最后在点击 image.png 恢复js程序执行

刷新页面，所有断点保持禁用状态，可以直接查看修改结果。

清空缓存并硬性重新加载页面，所有断点恢复启用，js执行会进入断点。

调试面板介绍

Watch

Watch 折叠面板 可让您监控一段时间内的变量值，随着程序执行，表达式会持续更新执行。不仅限于局部变量/全局变量。任何有效的 JavaScript 表达式都可以存储在 Watch 表达式中。

image.png

点击 image.png 添加一个 Watch 表达式监听，输入表达式后按回车保存

image.png

点击 image.png 刷新 watch 表达式列表

鼠标悬浮表达式，高亮展示，点击右侧 X 删除表达式

image.png

或者右击表达式，选择Delete watch expression

image.png

Breakpoints 折叠面板

Breakpoints 折叠面板 记录当页程序所有资源文件中设置的js断点

test.html 文件断点

image.png

test.js 文件断点

image.png

右击断点支持快捷操作

image.png

  • Remove breakpoints 删除此断点
  • Remove all breakpoints 删除所有断点（包括其他文件）
  • Remove other breakpoints 删除此断点以外的所有断点（包括其他文件）
  • Reveal location 在文件中定位断点位置，并黄色高亮所在行

image.png

  • Deactivate breakpoints 断点无效，行号断点高亮半透明，BreakPoints透明（感觉跟禁用断点类似）
  • Disable all breakpoints / Enable all breakpoints 禁用/启用所有断点（包括其他文件）（行号断点高亮半透明）
  • Disable breakpoints in file / Enable breakpoints in file 禁用/启用本文件的所有断点（行号断点高亮半透明）

Scope

Scope 折叠面板 显示当前定义的局部变量和全局变量，以及每个变量的值。它还显示了闭包变量（如果适用）。双击变量值可以进行编辑。当您没有在一行代码上暂停时，Scope 折叠面板内容是空的。

image.png

  • Local 局部变量
  • Script script 脚本变量
  • Global 全局变量

image.png

Call Stack

Call Stack 折叠面板 用来查看当前js函数调用堆栈内容，检测代码是否按照正确顺序调用函数。在调试时如果忽略脚本以跳过它。“调用堆栈”窗格中的脚本会被隐藏，并且在单步执行代码时您永远不会单步执行脚本的函数。

image.png

忽略调用堆栈中的脚本，右击面板的调用函数，选择Add script to ignore即可，单步执行就不会进入忽略的脚本中。

image.png

复制调用堆栈信息，右击面板的调用函数，选择Copy stack trace即可，

image.png

XHR/fetch Breakpoints

XHR/fetch Breakpoints 折叠面板 展示所有相关xhr异步请求接口调用断点

DOM Breakpoints

DOM Breakpoints 折叠面板 展示所有的DOM节点断点，

image.png

右击DOM断点，展示更多操作

image.png

  • Reveal DOM node in Element Panel 自动切换到Element 面板 ，并在DOM树上定位到断点位置，并选中该节点（高亮展示）

image.png

  • Remove breakpoint 移除此DOM节点断点
  • Remove all DOM breakpoints 移除所有DOM节点断点

DOM节点断点，可以在Element 面板 展示的DOM树上对需要监听的DOM节点打断点（Break on），可以监听DOM节点的属性变化、子节点变化、或者DOM节点移除，打断点后，DOM树左侧展示高亮圆圈标识断点

image.png

Global Listeners

Global Listeners 折叠面板 展示全局监听器

image.png

Event Listener Breakpoints

Event Listener Breakpoints 折叠面板 拦截页面发生的事件。勾选需要监听拦截的事件，当页面发生勾选的事件后会进入断点拦截（stop阻止冒泡也不会影响）

image.png

CSP Violation Breakpoints

CSP Violation Breakpoints 折叠面板 展示 CSP(Content Security Policy 内容安全策略) 断点控制。启用 Trusted Type violation 复选框以暂停异常。

监听 securitypolicyviolation， CSP Violation Breakpoints 面板展示内容

image.png

Content-Security-Policy: CSP可以在meta标签和HTTP头中使用。

  • 这个响应头表示图片的src只能加载同源的，注意self的引号
Content-Security-Policy: img-src 'self'
  • 那么 xxx.com 的图片就可以在这个页面上加载
Content-Security-Policy: img-src http://xxx.com
  • 多个安全策略的情况，同一种类的不同域名之间用空格分隔，不同种类之间用分号
Content-Security-Policy: img-src 'self' http://www.baidu.com; script-src http://xxx.com http://yyy.com

违反安全策略时，会触发 securitypolicyviolation 事件，可以通过addEventListener来监听该事件

删除断点

  • 手动在文件预览行号点击高亮的断点取消、或者右击高亮的断点选择Remove breakpoint

image.png

image.png

  • 在调试面板，展开Breakpoints折叠面板，查看当前所有的断点信息（包括其他文件），取消勾选禁用断点，同右击断点选择Disabled breakpoint一个（对应行号断点高亮半透明）

Breakpoints折叠面板 记录所有文件的断点，不仅是当前预览的文件

image.png

右击断点，选择Remove breakpoint 删除断点

image.png

  • 同上，右击断点，选择Remove all breakpoints 删除所有断点（包括其他文件）

image.png

avatar
文章
阅读
粉丝