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

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

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


  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条件断点的妙用

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

相关阅读
为什么谷歌浏览器显示“无法建立安全连接”

为什么谷歌浏览器显示“无法建立安全连接”

使用谷歌浏览器访问某些网站时,可能会遇到“无法建立安全连接”的提示。这通常与SSL证书错误、浏览器设置、网络环境等因素有关。本文将详细介绍导致该问题的原因,并提供有效的解决方案,帮助用户恢复正常访问。

chrome怎么打开小恐龙游戏

chrome怎么打开小恐龙游戏

本篇文章给大家带来Chrome浏览器调出小恐龙游戏的具体方法,希望能够帮助大家解决问题。

手机版谷歌浏览器闪退怎么解决

手机版谷歌浏览器闪退怎么解决

手机版谷歌浏览器闪退怎么解决?本篇文章就给大家详细介绍手机版谷歌浏览器轻松解决闪退问题攻略,感兴趣的朋友不要错过了。

谷歌浏览器点击没有反应怎么回事

谷歌浏览器点击没有反应怎么回事

谷歌浏览器点击没有反应怎么回事?本篇文章就给大家带来谷歌浏览器解决点击没有反应方法教程,有需要的朋友千万不要错过了。

谷歌浏览器默认只能装C盘吗

谷歌浏览器默认只能装C盘吗

小编每次安装或更新谷歌浏览器的时候,都会有这样的疑惑,毕竟电脑C盘对于我们来说太重要了,小编安装软件的原则就是,能不安装在电脑C盘的软件,就绝对不会安装在C盘,除非无法选择。

如何删除QQ浏览器的历史记录及书签

如何删除QQ浏览器的历史记录及书签

在QQ浏览器上,如果清理删除了历史记录是没有办法恢复的,而且QQ浏览器是默认垃圾过多时会自动清理历史记录,所以大家对感兴趣的网站一定要收藏在书签中,删除掉的书签是可以恢复的。

如何禁用Chrome书签栏中的应用和阅读列表?

如何禁用Chrome书签栏中的应用和阅读列表?

谷歌Chrome提供了许多默认功能,这些功能可能并不适用于所有用户。书签栏是浏览器界面中出现在所有选项卡上的项目之一。这个书签栏包含不同类型的项目,同样默认包含一些项目。应用和阅读列表是默认占据Chrome书签栏的两个项目。

将Chrome选项卡变成记事本的3种快速方法!

将Chrome选项卡变成记事本的3种快速方法!

有时您需要在想法消失之前写下您的想法。也许你有一个绝妙的主意,或者你刚刚记住了一些你忘记做的事情。幸运的是,一些 Chrome 扩展非常适合您需要在旅途中记笔记时使用。

如何修复 WordPress RSS 提要在 Chrome 中不起作用?

如何修复 WordPress RSS 提要在 Chrome 中不起作用?

许多系统和用户都依赖WordPress RSS 提要。Syndication 让用户了解情况,同时让其他平台知道何时有新内容可用。

Win10升级后 chrome内核浏览器变得很卡怎么办?

Win10升级后 chrome内核浏览器变得很卡怎么办?

win10版本还存在着许多bug,可能会拖慢谷歌浏览器的运行,该怎么解决这种现象呢,和小编一起

如何在 Chrome 中对标签进行分组?

如何在 Chrome 中对标签进行分组?

任何人在使用谷歌浏览器时学到的第一件事就是标签管理可能会失控。对我个人而言,打开新标签就像呼吸一样;它只是发生,无论我是否敏锐地意识到它。当您打开如此多的 Chrome 标签页,以至于您几乎无法辨认出每个小图标旁边的文字时,您可能会开始怀疑是否有更方便的方式来组织您的浏览器。幸运的是,有一种方法可以在 Chrome 中对标签进行分组。

如何轻松修复“找不到服务器 IP 地址”谷歌浏览器错误?

如何轻松修复“找不到服务器 IP 地址”谷歌浏览器错误?

谷歌浏览器是否在加载网页时遇到问题?阅读本文中的解决方案以修复它并重新上线。