Chrome Devtool的使用技巧

做一个懂点前端的后端🐶

常用快捷键

DEVTools快捷键
快捷键 作用
Ctrl + Shift + I, F12 打开 DevTools
Ctrl + Shift + C 打开 DevTools,并且开启审查元素模式
Ctrl + Shift + J 打开 DevTools,并且定位到控制台面板
Ctrl + + 放大 DevTools
Ctrl + - 缩小 DevTools
Ctrl + 0 DevTools 恢复大小
Ctrl + O 按文件名查找 (排除Timeline面板)
Ctrl + Shift + O Go to member/打开文件
Ctrl + f 当前文件或面板查找
Ctrl + Shift + f 全局查找资源文件内容
Ctrl + Shift + M 打开设备(Device)模式
Sources面板快捷键
快捷键 作用
Ctrl + / Sources面板下切换注释
Click on line numberCtrl + B Toggle breakpoint condition
Ctrl + Enter Sources面板中Run snippet
Ctrl + Alt + S Sources面板中Save all changes
Ctrl + g Sources面板下定位文件/行
Ctrl + d Sources面板下定位下一个编辑项目
Console面板快捷键
快捷键 作用
Ctrl + l 清空控制台
Shift + Enter Console下多行输入
Esc 切换控制台 / 关闭设置对话框
Element面板快捷键
快捷键 作用
F2 编辑选中节点HTML
Enter 编辑选中节点属性
Right,Left 展开/折叠节点
Ctrl + O 打开了一个搜索面板

upload successful

有些网站按F12是没有用的,因为JavaScript脚本把浏览器的默认事件给阻止掉了,但是没事,只要你能打开Chrome DevTools,脚本怎么阻止都没有用。12找到network,下面仔细找,总能找到cdn地址,复制下来贴迅雷里就能下了。
当你在Sources 标签下编辑文件时,如果你按下Ctrl + D (Cmd + D),下一个匹配项也会被选中,这能够帮助你同时编辑他们。

Element 面板

如何查询某个元素所绑定的事件并手动操作解除绑定

oncopy 和addEventListener绑定的事件监听都在此显示
🤞chrome开发者工具功能拾遗:Sources面板篇
查看节点所有属性

CSS数字属性

在CSS样式的属性值上,如果是数字的属性值,则可以通过按上下方向快捷键来给属性值加一,通过按住shift键的同时按上下方向快捷键,可以给属性值递增十。

在Element标签下,ctrl + f 搜索框里,可以用 css 选择器来查找。

按住Ctrl点击色块打开调色板

image.png

选择一个DOM元素,按下H键,隐藏元素

打开审查元素后长按刷新键

在source中查找某个js文件:Ctrl/Command+G,(tips:这种方法很恶心的是会在输入框中默认加了冒号)
在当前js文件中查找某个方法:Ctrl/Command+shift+O(这个很nice)

可以获取到鼠标悬停下的样式表,用的比较多的是hover

用的比较多的是hover,可以获取到鼠标悬停下的样式表。

右键菜单上的“Force element state”这个操作,就是强制设置该元素的状态。状态分为四种,分别是active/hover/focus/visited。强制设置状态在某些情况下比较的有用,例如你想查看某些hover伪类的样式,又例如元素里有隐藏的元素,需要在鼠标hover的时候才出现,但你的鼠标移开的时候hover状态就消失了,强制显示hover状态比较方便你检查元素hover的情况。

Console面板

  1. console.table打印数组对象(数组每一项是对象)信息非常好
    upload successful
  2. 在使用console.log();的时候,不仅仅打印变量,而是要打印对象,用大括号({})将变量包围起来。这样的优点是不仅会把变量的值打印,同时还会将变量名打印出来。
    upload successful
  3. 给log加点颜色
    upload successful
  4. $ 和 $$

    如果你在console下没有任何库使用$和$$,那么你可以使用它们分别作为document.querySelector() 和 document.querySelectorAll()的快捷键。
    除了提供了一个更加快捷的方式外,还有一个好处,$$返回一个数组,而不是array-like的NodeList. 所以你可以直接使用map, reduce和filter 函数。
    你可以使用$$检查页面中的无效链接:

    1
    2
    3
    4
    5
    6
    7
    8
    Promise
    .all(
    $$('a')
    .map(link => link.href)
    .map(href => fetch(href))
    )
    .then(() => console.log('All links working'))
    .catch(() => console.error('Some links are broken'));
  5. $0

    如果你想引用某个DOM元素,使用$0。$0指向你当前在Element中选中的元素。如果指定了$0,$1指向之前选中的元素。以此类推,直到$4都可以使用。

  6. $_

    $_记录了最后一次在Console计算的表达式。

  7. getEventListeners()

    getEventListeners(domElement) 返回在DOM元素上注册的所有的事件。请看下面的例子:
    upload successful
    你也许注意到了,当我在console里输入表达式的时候,其结果立即被计算出来了。你可以看到我并没有敲击Enter键,而结果已经显示出来。这个是金丝雀版本的一个新功能,叫做”Eager Evaluation”。

  8. debug(fn)

    在上面的例子中,如果你想在点击按钮后的执行过程中暂停,你可以使用debug函数。debug(fn)接收一个函数作为参数,当每次该函数被调用时,Debugger就会在该函数的第一行中断执行。
    想象一下你要debug一个按钮的问题,但是你不知道这个按钮对应的事件函数在代码中什么位置。除了去大量的源代码中慢慢寻找之外,还有一个巧妙的方法。使用getEventListeners函数,然后将debug方法注入进去。这样,当你点击按钮的时候,就会在该函数的第一行停下来。

  9. copy(obj)

    copy(anything) 是一个很有用的工具函数方便你将任何东西拷贝到系统的粘贴板暂存。
    给copy函数传入一个没有格式的JSON,会返回格式化的结果:

  10. XHR breakpoints

    使用条件断点在生产环境中注入console logs
    断点是一个很棒的功能。但还有一个更棒的:条件断点。只有当设定的条件满足的时候,中断才会执行。也就是说DevTools并不会每次都中断程序的执行,而只是在你想要它中断的时候才中断。想了解更多:查看这里.
    在生产环境下,因为不能修改源代码,我喜欢使用条件断点来注入console.log。如果我的断点仅仅是一个console.log,DevTools不会中断,因为console.log返回undefined,,是一个false的值。但是它会执行我注入的表达式,可以看到输出结果。
    upload successful
    为什么不直接使用普通的断点,并且查看变量呢?有时候我并不想这样做。比如,当我在分析那些频繁执行的操作,例如触摸或则滑动。我并不想每一次都导致Debugger触发程序中断,但是我想看到程序输出的结果。
    如果想要理解一个

  11. 请求是如何执行的,可以使用sources面板的XHR breakpoints。

Sources面板

如果添加“条件判断”的断点?

相信大家在调试的时候,最烦就是在for循环中的断点了,需要不断地按下一步来在循环中找到要验证的数据。在代码中添加debugger的方式可以这么写:

1
2
3
4
for(var i = 0; i < length; i++){
if(i === 2){
debugger;
}}

通过snippet载入jquery

想要在不同网页中反复执行同一个代码片段,保存为Snippet吧!
通过snippet载入jquery

在面板中的Sources部分的Snippets,可以新建一个代码片段来测试,很是方便

写上代码就随意玩儿吧,可以Ctrl+S保存到本地,下次打开它还在

代码格式化

目前线上的js代码基本上都是做个压缩和变量名混淆的,这样对于js代码的体积压缩有好处,但对于要调试的前端工程师来说,却是个大麻烦。
点击格式化按钮就能格式化当前的代码,变成有换行格式的代码,阅读起来不再那么晦涩难懂。
然而,变量名还是一些简单的字母,看起来还是非常的费劲。有办法把混淆的变量名变回原本的变量名吗?
答案是有的!不过需要原先的代码支持source map。
source map其实是在代码在发布的时候声明它的变量替换的规则文件。例如在jQuery1.9.0更高的版本的代码,末尾有一句:
//@ sourceMappingURL=jquery.min.map
这就是声明了它的source map文件的路径,而source map文件里大概是这样子的:

1
2
3
4
5
6
7
{
"version": 3,
"file": "jquery.min.js",
"sources":["jquery.js"],
"names": ["window","undefined","isArraylike"],
"mappings": "CAaA,SAAWA,EAAQC"
}

给没有jQuery的网站临时加载jQuery,作用等同于snippet

1
2
3
4
var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")
fileref.setAttribute("src", 'http://cdn.bootcss.com/jquery/1.11.3/jquery.js')
document.getElementsByTagName("head")[0].appendChild(fileref)

给手机加上外框

截屏

测试手机版网页

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –user-agent=”Android”

拖曳地址栏前面的小图标到收藏栏,可以快速收藏。

Network表盘按钮作用

image.png

奇淫巧计

想在Chrome写些日常感悟?或者有好的文章想收藏下来?在地址栏输入“data:text/html,%20<html%20contenteditable>Title”,最后按Enter键,瞬间让你的Chrome变成记事本!PS:已被自己的英语水平帅哭,谁叫我们都是过了六级的人呢?