首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Chrome 调试技巧简记

Chrome 调试技巧简记

作者头像
Chor
发布2020-02-20 11:58:36
1K0
发布2020-02-20 11:58:36
举报
文章被收录于专栏:前端之旅前端之旅
阅读掘金小册《你不知道的 chrome 调试技巧》后做的笔记

1. 快捷键:

  • 切换面板位置: ctrl + shift + D
  • 切换面板类型: ctrl + [ 向左, ctrl + ] 向右
  • 切换手机/PC模式: ctrl + shift + M
  • 切换审查元素模式/浏览器窗口: ctrl + shift + C
  • 打开命令面板:ctrl + shift + P

2. 截图:

ctrl + shift + P 打开命令面板,搜索 screen 可进行各类截图,包括节点截图、区域截图和全屏截图

3. 调试:

3.1 复制和存储
  • copy():拷贝数据
  • store as global variable:拷贝一份独立的数据并作为全局变量
  • save as...:保存报错的堆栈信息作为 log 文件,而不是单纯的截图
3.2 代码块保存和复用

如果经常需要在控制台中调用某段代码块,可以考虑把它保存起来以便复用。source --> snippets --> + New snippet 新建代码块并保存。这不会随着缓存清除而消失。

3.4 节点引用
  • $0 是对当前选中节点的引用,$1 是相对于 $0 的上一个被选中节点,以此类推,$2$4 同理。
  • $(...):这里注意和 jquery 中的 $(...) 是不一样的。例如,jq 中的 $('div') 可以选中所有 div 元素,而控制台中的 $('div') 则类似于 document.querySelector('div'),只能匹配第一个 div。
  • $$(...):类似于 document.querySelectorAll('div'),可以匹配所有的 div。区别在于,它可以确切返回一个数组,而不是 Node list
  • $_:要查看上一次执行的结果,可以通过键盘上下箭头重新执行一遍代码,也可以直接 $_ 进行打印。它是对上一次执行结果的引用。
3.5 监听元素状态改变

右键目标元素,选择 break on 的触发条件:

  • subtree modifications :当前节点的子节点被 移除 或者 添加 时触发断点
  • attribute modifications :当前节点的任意属性被 添加移除 或者 修改 时触发断点
  • node removal :当前节点被 移除 时触发断点
3.6 console.log 的坑
let person = {
    name:'Jack',
    job:'worker'
};
console.log(person);
person.name = 'John';
console.log(person);

在使用 console.log() 打印对象的时候,需要注意它打印的是那时的快照(snapshot),所以在未展开对象的时候,打印结果符合我们的预期:

但是在展开对象后,浏览器会重新读取引用的对象本身的属性,故此时两次打印的属性都同步为最近更新的属性值:

注意这和异步同步无关。

3.7 更好的打印

带条件判断的 console.log() 可以用 console.assert() 来代替,它会在第一个参数为假值时,打印第二个参数的内容:

将变量名放在花括号中整体打印出来,变量与变量值的对应关系会更加清晰:

console.table() 可以以表格形式打印数组:

也可以以表格形式打印对象。这里以类数组对象为例:

当然这两者还可以结合起来,将一组变量直观地打印出来。

console.dir 可以将 dom 元素以 js 对象而不是 HTML 的形式打印出来:

还可以开启 log 的时间戳:

F12 --> ctrl+shift+P --> show timestamps

3.8 结构和样式调节
  • 在元素面板中可以通过拖动、ctrl+x 等直接操作 HTML 结构
  • 在样式面板中可以通过点击阴影方块便捷地调节阴影效果
3.9 源文件修改同步到本地文件(持久化保存)

Sources —> Filesystems —> Add folder to workspace

点击样式面板中的 + 可以添加新的样式规则,新增的样式规则默认放在一个单独的 CSS 文件中,可以长按 + 决定它的书写位置。

4. 真机调试

有时候,Chrome 模拟手机调试的结果不一定准确,这时候就需要用到真机调试了。真机调试允许开发者通过 Chrome Devtools 直接调试手机上的页面,我们需要的只是在 PC 和手机上安装 Chrome 浏览器,并准备一根数据线。

首先用数据线将 PC 和手机连接起来,并打开手机的开发人员选项,接着打开 PC Chrome 的 chrome://inspect/#devices 页面:

将手机维持在浏览器页面,试着打开百度:

点击 inspect 会打开一个新窗口,在这里可以进行调试:

所有的操作会同时同步在 PC 端和手机端的页面上。

还有一种情况是调试本地文件,这时候需要使用 Port forwarding 端口转发功能。端口转发的前提是我们需要在本地开启一个服务器,对于平常写的 demo,用 live sever 插件或者 Node.js 开启一个服务器就好了。因为 Hexo 博客本身提供了本地服务器,我这里拿它示例。

首先通过命令行的 hexo s 开启本地服务器,然后配置一下端口转发的参数(我这里是 4000 端口)。记得勾选开启:

出现了绿点,说明配置没问题:

在地址栏输入端口地址,然后点击 inspect 看一下:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-02-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 快捷键:
  • 2. 截图:
  • 3. 调试:
    • 3.1 复制和存储
      • 3.2 代码块保存和复用
        • 3.4 节点引用
          • 3.5 监听元素状态改变:
            • 3.6 console.log 的坑
              • 3.7 更好的打印
                • 3.8 结构和样式调节
                  • 3.9 源文件修改同步到本地文件(持久化保存):
                  • 4. 真机调试
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档