chrome-devtools

1.Chrome hotkey

  • ctrl + +|-|0

  • ctrl + 1~9

  • ctrl + T

  • ctrl + <-|->

2.Hotkey

  • ctrl + p -> ?查看可用命令

  • ctrl + shift + p

  • ctrl + f

  • ctrl + shift + f

  • ctrl + [|] 切換面板

  • sources panel -> ctrl + shift + p -> coverage (red section is useless)

  • ctrl + p + ! + snippetName

3.ELements (right click on a dom element)

  1. Styles

    • :hov

    • color selector

    • shift + click to change color between rgba、hsl and hexadecimal

    • long press +

  2. Computed

  3. Event Listeners

    • show function define

  4. Properties

  5. DOM Breakpoints

  6. element related

    1. h //hidden or show element

    2. drag element

    3. ctrl + ⬆ | ⬇ move up / down element

    4. ctrl + c/v/z element

    5. Shadow editor and Timing function editor

    6. expand recursively

    7. break on (subtree modifications、attribute modifications、node removal)

4.Console

  1. abbreviation(support jQuery selector)

$() : document.querySelector()的缩写，返回本页第一个与之匹配的CSS选择器的元素,$$(selector,[startNode])

\$\$() : document.querySelectorAll()的缩写，返回一个数组，里面是与之匹配的CSS选择器的元素,$$(selector,[startNode])

\$0–4 : 依次返回五个最近你在元素面板选择过的DOM元素的历史记录，$0是最新的记录，以此类推

\$_ 上一次結果引用

  • \$x("//p") locate by xpath,$x(selector,[startNode])

  • keys() / values()

  • group() groupEnd() / profile() profileEnd()

  • console.log() / warn() / error()

  • console.trace()

  • console.count('xxx')

  • clear()

  • Live expression

  • ctrl + shift + p -> timestamps

  • console.time([tagString]) timeEnd([tagString])

  • await xxxx 可以直接console寫await

    await navigator.storage.estimate()
console.table(await navigator.getBattery())
await caches.keys()

  • console.assert() //对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台

  • dir($1)

  • table(obj, [colName, colName2]) //類數組或對象

  • copy(obj)

  • inspect($('selector'))

  • Store as global variable

  • 堆棧信息保存到文件

  1. console.log(var1, var2, var3) -> console.log({var1, var2, var3})

  2. 监控事件

  • monitorEvents($(‘selector’)) 将监视与选择器的元素关联的所有事件，然后在它们被触发时打印到控制台

  • monitorEvents($(‘selector’),’eventName’) 将打印与元素绑定的特定事件

  • monitorEvents($(selector)，[eventName1, ...'])将根据您自己的需求记录多个事件

  • unmonitorEvents($(selector))这将停止监视和打印控制台中的事件

  • monitor/unmonitor monitor 是 DevTools 的一个方法， 它能够让你 "潜入"到任何 _function calls中：每当一个 被潜入的方法运行的时候，console 控制台会把它的实例打印出来，包含 函数名 以及 调用它的参数

  1. queryObjects(Person)

  2. getEventListeners($(‘selector’)) //查找与DOM中的元素关联的事件

  3. document.body.contentEditable=true //将浏览器转换为编辑器

  4. document.designMode='on'

5.Sources

  • {} => format

  • Filesystem

  • Snippets

  • blackbox script

  • condition breakpoint

    • 可以直接console.log(), 返回時falsy不會暫停

  • pause on exception

  • ctrl+shift+p-> 查看代码coverage

  • Local overrides

    • Local overrides 模拟 Mock 数据

6.Network

  • 自定義顯示列

  • filter(larger-than 、status-code、 mine-type、method、mime-type)

    • ctrl + space //see all keywords

  • initiator

  • right click瀏覽器refresh按鈕多條件刷新

  • replay XHR

    • Sources面板增加XHR/fetch斷點(填入url固定某個請求或留空任意xhr請求)

  • block request URL

  • Preserve log

  • block request

  • copy response

  • settings

7. Drawer

  • 任意面板點ESC打開drawer

  • Coverage

  • Changes

  • Quick source

  • 控制传感器

  • 模拟网络状态

8. workspace

  • 在 Chrome 中修改你的文件

  • Workspace 支持即时同步样式

  • 为新选择器选择目标位置

  • Workspace 允许 CSS 注入

9.Application

  • local storage

  • session storage

  • cookie

10.Settings

  • Show user agent shadow DOM

  • Log XMLHttpRequests

  • Enable custom formatters

11. Performance

  • > performance monitor 性能监视器

  • FPS选择第一项,FPS实时监控性能

  • screenshot 截图相关

  • coverage 查看代码利用率

PreviousviNextgit

Last updated