JS 调试笔记 Chrome

笑虾

已于 2023-02-28 10:42:39 修改

阅读量959

点赞数

分类专栏： JavaScript 文章标签： js debug chrome 调试

于 2020-03-22 13:43:50 首次发布

大家好，我是笨笨，笨笨的笨，笨笨的笨，转载请注明出处，谢谢！

本文链接：https://blog.csdn.net/jx520/article/details/105022869

版权

JavaScript 专栏收录该内容

80 篇文章 19 订阅

订阅专栏

JS 调试笔记 Chrome

F12 打开【开发者工具】
Elements 标签：Dom元素
- `Elements`下的子标签
Console 标签：命令行
Sources 标签：源代码
Network 标签：网络
Application 标签：应用
其他命令
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功能都有了。

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

进阶`debug`功能

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

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

事件断点

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

1、`Page`: 网站页面

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

2、`Filesystem`: Chrome IDE:

chrome 31 开始的功能

本地建立一个文件夹
Source》Filesystem》+ Add folder to workspace添加文件夹 (然后Source 就可以当IDE用了)

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

chrome 65+ 开始的功能

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

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"]
}