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

 发布时间:2022-04-14  93 来源:谷歌浏览器官网
谷歌浏览器电脑版 谷歌浏览器电脑版

硬件:Windows系统 版本:122.0.6261.6 大小:66.69MB 语言:简体中文 评分: 发布:2023-07-23 更新:2024-05-28 厂商:谷歌信息技术(中国)有限公司

谷歌浏览器安卓版 谷歌浏览器安卓版

硬件:安卓系统 版本:107.0.5304.105 大小:174.16MB 语言:简体中文 评分: 发布:2022-08-18 更新:2024-03-12 厂商:Google Inc.

谷歌浏览器苹果版 谷歌浏览器苹果版

硬件:苹果系统 版本:122.0.6261.89 大小:198.4 MB 语言:简体中文 评分: 发布:2022-01-23 更新:2024-03-12 厂商:Google LLC

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


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

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

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

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

  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选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$和$$替代。

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

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

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

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

  安装Console Importer插件

  $i('name')安装npm包


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

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

相关阅读
如何安装去广告的chrome浏览器?

如何安装去广告的chrome浏览器?

如何安装去广告的chrome浏览器?对于浏览器而言,相信大家都用过并相信谷歌浏览器谷歌浏览器是全球都非常受欢迎的浏览器,用户通过使用该浏览器能够体验到极速流畅的浏览体验。

win10系统如何使用谷歌浏览器下载软件?

win10系统如何使用谷歌浏览器下载软件?

不同的操作系统使用浏览器的体验会有所不同。如果用户现在使用的是win10操作系统,那么在使用谷歌Chrome时如何下载想要的软件来使用呢?这是很多用户想知道的问题。用户可以自由使用手机在平台上搜索自己想要的软件,然后安装使用。

如何在基本操作系统上安装 Google Chrome?

如何在基本操作系统上安装 Google Chrome?

Web 浏览器是任何操作系统的重要应用程序。不是因为我真的需要它来工作,而是我们实际上花在它上面的时间比花在另一个应用程序上的时间要多。这主要是因为互联网是人们工作、娱乐和休闲的参考。此外,许多工作是通过互联网完成的,因此,网络浏览器是强制性的。

如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?

如何解决 Win10 下谷歌浏览器升级失败提示错误代码0x00000的问题?

Windows S10正式版自带edge浏览器,但很多用户更喜欢使用功能更强大的第三方浏览器,比如谷歌Chrome。

如何在 Linux 中下载安装老版本的谷歌浏览器?

如何在 Linux 中下载安装老版本的谷歌浏览器?

谷歌浏览器 Google Chrome完全免费,跨平台支持 Windows、Mac 和 Linux 桌面系统,同时也有 iOS、Android 的手机版 平板版,你几乎可以在任何智能设备上使用到它。

如何在 Android 版 Chrome 中管理下载?

如何在 Android 版 Chrome 中管理下载?

当您在 Android 上查看 Chrome 浏览器时,您可能会注意到它几乎没有提供管理下载的选项,您可能从桌面版 Chrome 中知道的内部 URL chrome: downloads 不起作用。