JS 调试笔记 Chrome

以你之姓@ 2023-05-28 14:19 13阅读 0赞

### JS 调试笔记 Chrome ###

*  F12 打开【开发者工具】
 *  Elements 标签：Dom元素
 *   *  \`Elements\`下的子标签
 *  Console 标签：命令行
 *  Sources 标签：源代码
 *   *  0、源码查看/调试
     *   *  常规\`debug\`功能
         *  进阶\`debug\`功能
         *  事件断点
     *  1、\`Page\`: 网站页面
     *  2、\`Filesystem\`: Chrome IDE:
     *  3、\`Overrides\`: Chrome 重写线上资源(调试利器)
     *  4、\`ContentScripts\` 内容脚本
     *  5、\`Snippets\`片段
 *  Network 标签：网络
 *  Application 标签：应用
 *  其他命令
 *   *  Ctrl + P
     *  Ctrl + Shift + P
     *   *  代码覆盖率 \`show coverage\`
         *  页面重绘检查 \`show paint flashing rectangles\`
         *  CSS动画检视 \`show animations\`
         *  页面元素截图 \`capture screenshot\`
         *  黑盒调试 \`Show Blackboxing\`
     *  Ctrl + Shift + F 全局搜索
 *  Chrome 设置 User-Agent

# F12 打开【开发者工具】 #

# Elements 标签：Dom元素 #

*  此标签下显示`Dom`树  
    一般在这里分析`网页结构`，还可以动态编辑

## `Elements`下的子标签 ##

*  **Styles**：样式调试
 *  **Computed**： 盒子模型
 *  **Event Listeners**：事件列表，当前页所有事件。（要断谁去打勾就行了）
 *  **DOM Breakpoints**：**`Dom`断点**。在`dom`树中右键可以从`break on`断点节点变化事件
    
     *  subtree modifications：子节点变化事件
     *  attribute modifications：属性变化事件
     *  node removal：节点移除事件
 *  **Properties**：所选节点的属性

# Console 标签：命令行 #

**`所有标签下按【esc】 可以显示隐藏 【console】`**  
就是命令行，没啥了。随便嗨皮吧。  
Console右上角有个`齿轮`可以打开console设置。里面有保存日志之类的设置如`Preserve log`。

# Sources 标签：源代码 #

## 0、源码查看/调试 ##

### 常规`debug`功能 ###

这里可以断点`JS`平时调试代码主要就在这里了，常规`debug`功能都有了。

1.  行号前面点击打断点。 (或在需要断点处写 `debugger;` 打断点）
2.  `F10`下一步
3.  `F8` 直接执行
4.  `Ctrl + F8` 启动禁用断点

### 进阶`debug`功能 ###

我讲点其它的：比如右侧列出了各种类型的断点，变量信息等。

*  `【Event Listener Breakpoints】`  
    这下面列出了所类型的事件，有时引用了别的库，不知道事件处理方法在哪里。此处打断点就方便找了。\`
 *  `【Add conditional breakpoint】`  
    代码行上右键，添加条件断点，只有满足条件时才生效。（已有的断点也可以右键添加条件）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]

### 事件断点 ###

当前页面有`click`事件触发时，触发断点。 (定位绑定哪些事件，firefox 方便)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]

## 1、`Page`: 网站页面 ##

显示当前页面加载的相关资源。（包括引用的第三方资源）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]

## 2、`Filesystem`: Chrome IDE: ##

chrome 31 开始的功能

*  本地建立一个文件夹
 *  `Source`》`Filesystem`》`+ Add folder to workspace`添加文件夹 (然后Source 就可以当IDE用了)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 3]

## 3、`Overrides`: Chrome 重写线上资源(调试利器) ##

chrome 65+ 开始的功能

*  本地建立一个文件夹 `E:\localfile`
 *  `Source`》`Overrides`》`Select folder for overrides` 添加文件夹 (浏览器会请求访问权限，允许)
 *  `Source`》`Overrides`》`Enable Local Overrides` 勾选
    
     *  **方案一**  
        对应下图中的原始解构，在`E:\localfile`下从`csdnimg.cn`级开始创建。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 4]
     *  **方案二**  
        直接找到要修改的文件，随便改下再 `Ctrl + s` 浏览器就会自动在`E:\localfile`下按解构创建文件了。  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 5]

## 4、`ContentScripts` 内容脚本 ##

显示扩展提供的内容脚本 。如果扩展的`manifest.json`中定义了`content_scripts`其加载的内容将在此显示。

{ 
        "name": "扩展名称",
        "version": "1.0.0 扩展版本",
        "manifest_version": 2,
        "description": "扩展描述",
        "browser_action": { 
            "default_title": "点击执行",		//扩展按钮tips
            "default_icon": "icon.png",			//扩展按钮图标
            "default_popup": "popup.html"		//扩展按钮弹出页面
        },
        "content_scripts": [
            { 
                "matches": ["https://www.baidu.com/*"],
                "js": ["jquery-2.1.4.min.js","baidu.js"]
            }
        ],
        "permissions" : ["tabs", "activeTab"]
    }

## 5、`Snippets`片段 ##

创建并保存代码片段以便之后重复使用。  
![在这里插入图片描述][20210714160754789.gif_pic_center]

# Network 标签：网络 #

查看分析网络请求信息在这里。

# Application 标签：应用 #

这里可以查看，缓存，Frames层级等信息。(Frames下清晰的列出了页面的相关文件)

# 其他命令 #

## Ctrl + P ##

可以方便的查看并打开 js

## Ctrl + Shift + P ##

**Ctrl + Shift + P** 开发者工具的各种面板、执行各种命令。（在它的下来面板里有提示）

*  ### 代码覆盖率 `show coverage` ###

输入 `show coverage` 显示**coverage**标签，用于查看代码覆盖率。简单的说就是看下你写的那么多东西，到底那些地方都跑到了。修改多次的代码，难免产生废物，想清理一下么？  
![在这里插入图片描述][20200322110924331.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 6]

*  ### 页面重绘检查 `show paint flashing rectangles` ###

这是个开关命令。只要输入`flash`然后选择命令就行了。  
![在这里插入图片描述][20200322105850143.png]  
![在这里插入图片描述][20200322105733840.png]

*  ### CSS动画检视 `show animations` ###

animations  
![在这里插入图片描述][20200322110715697.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 7]

*  ### 页面元素截图 `capture screenshot` ###

![在这里插入图片描述][20200322111233257.png]

*  ### 黑盒调试 `Show Blackboxing` ###

屏蔽掉某些引用库的`js`以便专注调试自己的逻辑代码  
![在这里插入图片描述][20200322112200929.png]  
也可以从这里打开：

*  `F12`打开开发者工具，再`F1`打开设置
 *  找到`Blockboxing` 添加过滤规则  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 8]
 *  `【sources】标签下打开的【js】文件中，点击右键，也可以完成【black】操作`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 9]

## Ctrl + Shift + F 全局搜索 ##

或者用命令打开  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 10]

# Chrome 设置 User-Agent #

`Ctrl + Shift + P` 输入`>network conditions`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 11]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70]: /images/20230528/3f0b7dd2ad6548e9a3629ae0c171d7ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210106203613968.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210714150447222.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200322130605136.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200327182956860.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200327183329156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[20210714160754789.gif_pic_center]: https://img-blog.csdnimg.cn/20210714160754789.gif#pic_center
[20200322110924331.png]: https://img-blog.csdnimg.cn/20200322110924331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210106204533875.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[20200322105850143.png]: https://img-blog.csdnimg.cn/20200322105850143.png
[20200322105733840.png]: https://img-blog.csdnimg.cn/20200322105733840.png
[20200322110715697.png]: https://img-blog.csdnimg.cn/20200322110715697.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200322110735461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[20200322111233257.png]: https://img-blog.csdnimg.cn/20200322111233257.png
[20200322112200929.png]: https://img-blog.csdnimg.cn/20200322112200929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200322111933426.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210106210816699.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210219224148782.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200327183830900.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw,size_16,color_FFFFFF,t_70