笔记--你不知道的Chrome调试技巧

一叶春
366 阅读3分钟

掘金小册：你不知道的Chrome调试技巧，详细学习请看原文
知乎：精炼版

快捷键

  • 打开chrome工具： Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac)
  • 打开设置 ：F1
  • 切换控制台位置： Ctrl+Shift+D
  • 切换面板：按下 Ctrl + [ 和 Ctrl + ]
    Ctrl + 1 到 Ctrl + 9：没有设置切换的是浏览器的标签页，开启切换的是面板
  • 查询：Ctrl+f
  • 箭头 ：步长为1
    shift + 箭头 ：步长为10
    cmd + 箭头：步长为100
    打开Command菜单命令： [ Ctrl] + [Shift] + [P]

技巧

复制console面板内容： 直接输入copy() 当前copy($_)或者copy($0) 输出：ctr+v
保存暂存值： 右键选择 “Store as global variable” (保存为全局变量)

保存堆栈信息( Stack trace )：在报出错误地方右键 save as生成log文件，拖拉文件进控制台。
copy html结构： 在...右键copy->copy element

Command

截屏： 可以截node,全屏等， 打开控制面板，Ctrl + Shift + P，输入screen查询

双面板布局：形式一般是：元素面板 + 资源面板 Ctrl + Shift + P，输入layout查询

切换主题： Ctrl + Shift + P，输入theme查询

代码块

运行：Ctrl+enter/右键run 查找：Ctrl+P

console面板

易读性：用{写入要输出的参数} console.log({id,name,age,sex})
输出：console.table() 输出参数整合，console.log({id,name,age,sex)
打印一个 DOM 节点:console.dir()
$0:是对我们当前选中的 html 节点的引用，$1是对上一个节点的引用，直到$4

?:本质上来说 Array.from(document.querySelectorAll('div')) === ?('div')

$_：查看上一次结果
$i：安装npm $i('包名') 使用： _.方法

'bug':console 中打印出的对象，在你打印出他内容之前，是以引用的方式保存的。
异步：直接 await， await navigator.storage.estimate()
对象和方法：queryObjects()查询对象
monitor ：它能够让你 “潜入” 到任何 _function calls(方法的调用) 中：每当一个 被潜入 的方法运行的时候，console 控制台 会把它的实例打印出来，包含 函数名 以及 调用它的参数 。
monitorEvents:monitorEvents($0,'click')
console.assert:当我们传入的第一个参数为 假 时，console.assert 打印跟在这个参数后面的值
加样式:
实时表达式:眼睛

network

initiator:是哪个脚本的哪一行触发了请求。它显示了在调用堆栈中触发请求的最后一步,将鼠标悬停在显示的 initiator（例如 外部库）上，你将看到完整的调用堆栈，包括你的文件
请求过滤：method：post,可能的关键字，在空白的输入框按下 [ctrl] + [space]
自定义请求表：在显示列中右键，显示菜单

请注意，Response Headers己的选项。

调试

条件调试： 再也不用在源码里添加console.log了

  1. Add conditional breakpoint...(添加条件断点)
  2. 输入console.log()或值为true/false的条件表达式
  3. 不用时在Breakpoints右键remove all

时间

开启监听执行时间 Ctrl+shift+p 输入timestamps 计时的：
console.time()
console.timeEnd()

elements 元素面板

  • 通过按‘h’键关闭标签即隐藏内容，再次点击，则打开

  • 拖放和放置dom，直接拖结构放你想要的地方

  • [ctrl] + [⬆] / [ctrl] + [⬇] 拖动dom

  • [ctrl] + [v] 粘贴dom

  • [ctrl] + [z] 撤回

  • 阴影编辑器：你可以通过在 Style 面板中点击靠近 box-shadow 属性或者 text-shadow 属性的 阴影方形符号

  • Timing function editor 定时函数编辑器 3D 动画：直接在容器元素中设置一个 perspective 属性。例如：在 body 元素中设置 perspective: 1000px;

  • 插入样式规则的按钮

  • 在元素面板中展开所有的子节点 右击节点后的 expand recursively 命令 在该节点，alt加左键

Drawer

打开ctrl+shift+p 输入 drawer,或者element :
模拟位置，传感器，网络
选择Quick source, 快速查看代码 ，或者 设置断点 来说，它却是非常有用的技巧
选择coverage, coverage 工具可以跟踪当前加载的 JS 和 CSS 文件的 哪些行正在被执行 ，并显示 未使用字节的百分比 。 它用 绿色 的线条标记 运行 和用 红色 的线条标记 未运行
检查你修改的内容: Changes

workspce

在 Chrome 中修改你的文件,把项目的文件夹直接拖到 Source 面板

avatar
文章
阅读
粉丝