chrome的一些调试小技巧

迈不过友情╰ 2022-12-14 06:07 143阅读 0赞

## 一、一些常用的快捷键 ##

1.  Ctrl + Shift + D：切换DevTools窗口的布局（下右）
2.  切换DevTools选项卡

*  Ctrl + \[ 或 \]： 向左和向右
 *  Ctrl + 1 到 9：(可能需要DevTools>Settings>Preferences>*Appearance*中打开)

## 二、便于开发的小技巧 ##

1.  遇到bug需要同事帮忙时，可将报错信息保存为文件发送，右击报错信息，  
    找到‘save as’即可  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center]
2.  使用控制台自带的command面板，可以实现全屏截图、节点截图、控制台背景切换、面板布局切换，这篇文章说的很详细  
    [你不知道的chrome调试技巧][chrome].  
    [若上述文章需付费，点击此链接即可][Link 1].

## 三、console中的一些操作 ##

1.  $0、$1  
    在控制台的 Elements 面板中， $0 是对我们当前选中的 html 节点的引用。  
    $1 是对上一次我们选择的节点的引用，$2 是对在那之前选择的节点的引用，一直到 $4
2.  $\_ 是对上次执行的结果的 引用 ：![在这里插入图片描述][20201013151820647.png_pic_center]
3.  $i命令  
    现在的前端开发过程，离不开各种 npm 插件，但你可能没有想过，有一天我们竟然可以在 Dev Tools 里面来使用 npm 插件！

如果你只是想玩玩新出的 npm 包，现在不用再大费周章去建一个项目测试了，只需要通过 [Chrome插件:Console Importer ][Chrome_Console Importer]，快速的在 console 中引入和测试一些 npm 库。  
eg：  
运行 $i(‘lodash’) lodash 了

1.  console.log的条件断点

你可以通过以下集中方法添加条件断点：

（1）右击行号，选择 Add conditional breakpoint…(添加条件断点)

（2）右击一个已经设置的断点并且选择 Edit breakpoint(编辑断点)

然后输入一个执行结果为 true 或者 false 的表达式。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 1]

## 四、element中的一些操作 ##

1.  H: 隐藏／显示元素
2.  Ctrl + Shift + Z: 撤销所有修改  
    CMD + Z: 撤销上次修改
3.  展开所有的子节点: expand recursively命令（右击即可找到）

## 五、network的一些操作 ##

1.  重新发起一个请求（别再刷新页面啦）![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 2]
2.  请求过滤  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 3]  
    这里只记录了一些博主需要或没有接触的东西，如果小伙伴又不懂的地方，请看这里，有大量详细的介绍，本文也是借鉴于此  
    [你不知道的chrome调试技巧][chrome].  
    [若上述文章需付费，点击此链接即可][Link 1].

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e586f35338864b8e8061b4f5e57f4a62.png
[chrome]: https://juejin.im/book/6844733783166418958/section/6844733783204167688
[Link 1]: https://github.com/dendoink/FrontendWingman8
[20201013151820647.png_pic_center]: /images/20221123/08ed5a515a44441baf835cb2adc2048c.png
[Chrome_Console Importer]: https://chrome.google.com/webstore/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie/related
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/cd4dbc10190a48e6867910573abd5beb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/cfb0e4a610984906ac778c05d32ff86a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dlZ2VwaHA_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/d91f158d2f1f41aaac0d50c70e128cfd.png