kangkai124/blog

chrome 调试指南

Opened this issue · 10 comments

kangkai124 commented

关于chrome

kangkai124 commented

快捷键

  1. 切换 DevTools 窗口布局： ⌘ + shift + D

  2. 切换 DevTools 的面板：

  • 按下 ctrl + [ 和 ctrl + ] 可以从当前面板的分别向左和向右切换面板。
  • 按下 ctrl + 1 到 ctrl + 9 可以直接转到编号 1...9 的面板( ctrl + 1 转到元素面板，ctrl + 4 转到 网络信息面板等等，DevTools>Settings >Preferences>Appearance 打开该选项)
  1. elements， logs， sources & network 中的查找

image

kangkai124 commented

copy

通过全局的方法 copy() 在 console 里 copy 任何能拿到的资源，包括变量如 copy($_) 或 copy($0)
image

kangkai124 commented

Run Command

快捷键 ⌘ + shift + p

命令分为以下这几类：
image

截屏

在 Elements 里选择一个 DOM 节点，然后 ⌘ + shift + p 打开 Command 面板，输入 screen， 选择 >capture node screenshot 即可给整个 DOM 截屏。

快速切换面板

DevTools 使用双面板布局，形式一般是：元素面板 + 资源面板 ，它根据屏幕可用的部分，经常将不同面板横向或者纵向的排列，以适合阅读的方式展示出来。

打开 Commands 菜单并且输入 layout，选择你喜欢的排列方式。

切换主题

kangkai124 commented

在 Devtools 中保存代码块

进入到 Sources 面板，在导航栏里选中 Snippets 这栏，点击 New snippet(新建一个代码块) ，然后输入你的代码之后保存。右击菜单或者 ⌘ + Enter 运行

image

不必每次通过 Sources 来运行它们，在 console 中，⌘ + p打开 Command Menu，然后输入英文 !，选择你的代码块即可。

image

kangkai124 commented

$

$0 是对当前选中的 html 节点的引用
$1 是对上一次选择的节点的引用
$2 是对在那之前选择的节点的引用，等等一直到 $4

$ 和 $$

$ 是 document.querySelector 的别名
$$ 执行 document.QuerySelectorAll 并返回一个节点数组，而不是 node list

Array.from(document.querySelectorAll('.class-name')) === $$('.class-name')  // true

$_

对上次执行结果的引用

$i

在 Dev Tools 里面来使用 npm 插件，需要安装 Chrome 插件 Console Importer

kangkai124 commented

被 async 包裹的 console

(async () => {
    response = await fetch('http://api.com/xx/xx')
    json = await response.json()
    console.log(json)
})

在 DevTools console 里可以这样写：

response = await fetch('http://api.com/xx/xx')
json = await response.json()
kangkai124 commented

monitorEvents

image

kangkai124 commented

console.dir

打印一个 DOM 节点，并且可以看到属性。

kangkai124 commented

console.log 加上 CSS 样式

console.log('%cHello World', 'font-size:20px;color:red')
kangkai124 commented

Live expression

在这里可以定义任何 JavaScript 表达式，它会不断更新，表达的结果将永远存在

image