7个Chorme开发者工具的小技巧

36 阅读1分钟

1. 样式改动一把梭 (选中元素 - 筛选样式 - 在线修改 - 查看来源)

Command + F 全页面元素搜索

2. 美化network,不再翻到眼瞎

3. 3DView 超酷的(edge)

4. 一键展开(option/alt + click)

5. dom元素选择

  • $():document.querySelector()的缩写,返回第一个与之匹配的CSS选择器的元素(例如:$('div') 它将返回本页的第一个div元素)。
  • $$(): document.querySelectorAll()的缩写,返回一个数组,里面是与之匹配的CSS选择器的元素。
  • $0–$4: 依次返回五个最近你在元素面板选择过的DOM元素的历史记录,$0是最新的记录,以此类推。

20220326142417.gif

6. 全屏截图 (command + shift + p 调出全局搜索面板)

20220326142632.gif

7. 性能优化没思路?网站界的鲁大师直接开跑

20220326142859.gif