谷歌浏览器的前端开发小技巧!<教你如何在调试技巧上进步!>

更新时间:2022-04-14 124 来源:谷歌浏览器官网
正文介绍

       不知道大家有没有做过前端开发呢,如果有做过,相信谷歌浏览器一定是你在工作上的首选吧!你知道哪些谷歌浏览器前端开发中的小技巧呢,不是特别清楚地话就和小编来学学吧!


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

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

  按住opt键 + click(需要展开的最外层元素)

1

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

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

  '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

  更简单的方式

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

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


  3.# 快速切换主题

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

  cmd + shift + p 执行Command命令

  输入Switch to dark theme或者Switch to light theme进行主题切换9.# "$"和"$$"选择器

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

2

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

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

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

  安装Console Importer插件

  $i('name')安装npm包


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

  假设有下面这段代码,咱们希望食物名字是

相关阅读
如何将选项卡缩略图添加到 Google Chrome?

如何将选项卡缩略图添加到 Google Chrome?

默认情况下,Chrome 不会像其他浏览器那样在 Windows 任务栏中显示缩略图预览。这是使用标志或扩展名启用它。 Microsoft 在 Windows Vista 中为最小化到任务栏的软件引入了缩略图预览。从那以后,该任务栏缩略图预览功能一直是 Windows 的一部分。每当您将鼠标悬停在任务栏窗口上时,您都会看到其软件的小缩略图预览图像。

谷歌浏览器如何把钟爱的网站变成应用

谷歌浏览器如何把钟爱的网站变成应用

你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道谷歌浏览器如何把钟爱的网站变成应用吗?来了解谷歌浏览器把钟爱的网站变成应用的具体步骤,大家可以学习一下。

Chrome 声音在 Windows 中不起作用是怎么回事?<修复方法>

Chrome 声音在 Windows 中不起作用是怎么回事?<修复方法>

当您什么都听不见时,观看 YouTube 视频的乐趣会少很多。这是在 Windows 上为 Chrome 恢复声音的方法。

如何在谷歌浏览器中捕获整页截图?

如何在谷歌浏览器中捕获整页截图?

使用最新的谷歌Chrome版本并运行Android 12可以截取整个网页截图,省去多张截图的工作量

如何在 Google Chrome 中使用辅助功能?

如何在 Google Chrome 中使用辅助功能?

技术可能是一种令人兴奋的体验,但对某些人来说并非总是如此,尤其是那些残疾人。键盘访问、放大和屏幕阅读器等辅助功能是旨在帮助残疾人更轻松地使用技术的工具。Google Chrome 支持多种辅助功能,以适应能力有限的用户。

你现在应该改变的9个隐藏的Chrome设置

你现在应该改变的9个隐藏的Chrome设置

有很多方法可以让Chrome发挥更大作用。我们还将包括如何打开Chrome的实验设置,即所谓的标志,以及如果你想重新开始,如何将Chrome重置为默认设置。