• 技术文章 >web前端 >js教程

    11个可以提升效率的chrome调试技巧

    青灯夜游青灯夜游2022-06-13 10:41:49转载442
    本篇文章给大家分享11个chrome高级调试技巧,学会效率直接提升666%,希望对小伙伴们有帮助!

    chrome浏览器作为前端童鞋的老婆,相信你一定不陌生。调页面写BUG画样式看php片少了它整个世界都不香了。

    不信?一起来看看我们的老婆有多厉害....

    1#. 一键重新发起请求

    在与后端接口联调或排查线上BUG时,你是不是也经常听到他们说这句话:你再发起一次请求试试,我这边看下为啥出错了!

    重发请求,这有一种简单到发指的方式。

    1.gif

    不用刷新页面,不用走页面交互,是不是非常爽!!!

    2#. 在控制台快速发起请求

    还是联调或修BUG的场景,针对同样的请求,有时候需要修改入参重新发起,有啥快捷方式?

    2.gif

    曾经我总是通过改代码或者手写fetch的方式处理,想想真是太傻了...

    3#. 复制JavaScript变量

    假如你的代码经过计算会输出一个复杂的对象,且需要被复制下来发送给其他人,怎么办?

    3.gif

    以前我总是通过JSON.stringify(fetfishObj, null, 2)打印到控制台,再手动复制粘贴,这效率实在是太低了...

    4#. 控制台获取Elements面板选中的元素

    调试网页时通过Elements面板选中元素后,如果想通过JS知道它的一些属性,如位置等怎么办呢?

    4.gif

    5#. 截取一张全屏的网页

    偶尔咱们也会有对网页截屏的需求,一屏还好,系统自带的截屏或者微信截图等都可以办到,但是要求将超出一屏的内容也截下来咋办呢

    5 (1).gif

    如果要截取选中的部分元素呢?

    答案也很简单,第三步输入Capture node screenshot即可

    5-2.gif

    6#. 一键展开所有DOM元素

    调试元素时,在层级比较深的情况下,你是不是也经常一个个展开去调试?有一种更加快捷的方式

    6.gif

    7#. 控制台引用上一次执行的结果

    来看看这个场景,我猜你也一定遇到过, 对某个字符串进行了各种工序,然后我们想知道每一步执行的结果,该咋办?。

    'fatfish'.split('').reverse().join('') // hsiftaf

    你可能会这样做

    // 第1步
    'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
    // 第2步
    ['f', 'a', 't', 'f', 'i', 's', 'h'].reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
    // 第3步
    ['h', 's', 'i', 'f', 't', 'a', 'f'].join('') // hsiftaf

    7.png

    更简单的方式

    使用$_引用上一次操作的结果,不用每次都复制一遍

    // 第1步
    'fatfish'.split('') // ['f', 'a', 't', 'f', 'i', 's', 'h']
    // 第2步
    $_.reverse() // ['h', 's', 'i', 'f', 't', 'a', 'f']
    // 第3步
    $_.join('') // hsiftaf

    7-2.png

    8.# 快速切换主题

    有的同学喜欢chrome的白色主题,有的喜欢黑色,我们可以使用快捷键迅速切换两个主题。

    8.gif

    9.# "$"和"$$"选择器

    在控制台使用document.querySelectordocument.querySelectorAll选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$$$替代。

    9.gif

    10.# $i直接在控制台安装npm包

    你遇到过这个场景吗?有时候想使用比如dayjs或者lodash的某个API,但是又不想去官网查,如果可以在控制台直接试出来就好了。

    Console Importer 就是这么一个插件,用来在控制台直接安装npm包。

    10.gif

    11.# Add conditional breakpoint条件断点的妙用

    假设有下面这段代码,咱们希望食物名字是?时才触发断点,可以怎么弄?

    const foods = [
      {
        name: '?',
        price: 10
      },
      {
        name: '?',
        price: 15
      },
      {
        name: '?',
        price: 20
      },
    ]
    
    foods.forEach((v) => {
      console.log(v.name, v.price)
    })

    这在大量数据下,只想对符合条件时打断点条件将会非常方便。试想如果没有条件断点咱们是不是要点n次debugger?

    11.gif

    (学习视频分享:web前端开发编程基础视频

    以上就是11个可以提升效率的chrome调试技巧的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript Chrome
    上一篇:一文搞定JavaScript的节点操作 下一篇:简单了解JavaScript数据结构与算法之栈
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 全球最受欢迎的Google Chrome92正式版发布了!• Chrome92中非常有用的devtools新特性!• Chrome 96又又又更新了5个好用的功能!• 2022年首个稳定版:Chrome 97来了!• 10个值得了解的 Chrome 插件,助你提高工作效率!
    1/1

    PHP中文网