JS 调试笔记 Chrome
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"]
}
5、Snippets
片段
创建并保存代码片段以便之后重复使用。
Network 标签:网络
查看分析网络请求信息在这里。基本点一下就能看懂。
不过过滤规则稍微提一下:
1. 指定过滤字段
输入字段(类型)后,会提示当前可用的内容。
2. 输入-
表示排除,但还有一个作用可以触发提示。
3. 多个条件用空格分开
也可以按住 Ctrl
加选现有的过滤标签
4. 使用正则
像js一样正则使用 /.*s/
,但新测试效果是:支持结尾 $
但不支持开头^
5. 注意
1 默认过滤的字段:名称
or Name
2. 如果目标是 URL
记得要匹配 encoding
后的结果比如:空格
要用%20
6. 举例
使用-
+ 正则表达式
实现过滤掉:png, jpg, css, ico, js
注意这个里 js$
限定了末尾,所以 jsp
不在过滤之列,会正常显示。
-/png|jpg|css|ico|js$/
Application 标签:应用
这里可以查看,缓存,Frames层级等信息。(Frames下清晰的列出了页面的相关文件)
其他命令
Ctrl + P
可以方便的查看并打开 js
Ctrl + Shift + P
Ctrl + Shift + P 开发者工具的各种面板、执行各种命令。(在它的下来面板里有提示)
输入 show coverage
显示coverage标签,用于查看代码覆盖率。简单的说就是看下你写的那么多东西,到底那些地方都跑到了。修改多次的代码,难免产生废物,想清理一下么?
这是个开关命令。只要输入flash
然后选择命令就行了。
animations
屏蔽掉某些引用库的js
以便专注调试自己的逻辑代码
也可以从这里打开:
F12
打开开发者工具,再F1
打开设置- 找到
Blockboxing
添加过滤规则
【sources】标签下打开的【js】文件中,点击右键,也可以完成【black】操作
Ctrl + Shift + F 全局搜索
或者用命令打开
Chrome 设置 User-Agent
Ctrl + Shift + P
输入>network conditions