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

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

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

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

硬件:安卓系统 版本:107.0.5304.105 大小:218.98MB 语言:简体中文 评分: 发布: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条件断点的妙用

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

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

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

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

谷歌浏览器更新后安装失败怎么办_谷歌浏览器安装失败解决方法

谷歌浏览器更新后安装失败怎么办_谷歌浏览器安装失败解决方法

你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器更新后重新安装失败是怎么回事呢?来了解谷歌浏览器更新后重新安装失败的解决方法,大家可以学习一下。

Windows 10 谷歌浏览器如何禁用迅雷下载?

Windows 10 谷歌浏览器如何禁用迅雷下载?

一位windows10系统用户反映,在谷歌Chrome中安装了Chrome插件的迅雷下载扩展后,一下载东西就启动迅雷,感觉有点烦

如何在 Ubuntu 22.04 Jammy Jellyfish 上安装 Google Chrome?

如何在 Ubuntu 22.04 Jammy Jellyfish 上安装 Google Chrome?

Google Chrome 是最流行的网络浏览器之一,可在许多不同的设备上使用。它也可以在Ubuntu 22 04上运行,尽管 Mozilla Firefox 是默认的网络浏览器并且预装了发行版。

如何在电脑安装谷歌浏览器

如何在电脑安装谷歌浏览器

如何在电脑安装谷歌浏览器?谷歌的 Chrome 浏览器拥有十几亿的活跃用户,也是目前市场份额最大、兼容性最好的网页浏览器。

chrome浏览器无法下载是什么原因?该如何解决?

chrome浏览器无法下载是什么原因?该如何解决?

谷歌的chorme浏览器是一款综合性能比较优秀的浏览器,但因为某些原因,我们无法方便快速的下载安装,偶尔通过一些搜索引擎找到的很多都是“山寨”推广的产品。

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

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

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

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

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

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

如何修复验证码图片不显示在谷歌浏览器

如何修复验证码图片不显示在谷歌浏览器

向网站表单添加验证码保护有不同的方法。使用PHP脚本添加自动生成的图像或数学问题是一种简单的方法。另一方面,最受欢迎的Google reCAPTCHA有助于保护您的表单免受垃圾邮件发送者和机器人的攻击。您可以显示一个复选框供用户选择,谷歌将自动显示图像验证时,检测到可疑的活动。

如何从 Google Chrome 共享或导出书签?

如何从 Google Chrome 共享或导出书签?

自早期的 Netscape Navigator 时代以来,为链接添加书签的功能一直是浏览器的主要功能,现在保存我们在 Internet 上遇到的有趣网站和服务已成为常见做法。无论您是研究学校项目还是计划下一个假期,将 URL 保存为书签都有助于保持搜索井井有条。

如何在台式电脑上的 Chrome 中解锁表情符号库?

如何在台式电脑上的 Chrome 中解锁表情符号库?

到目前为止,还没有一种简单的方法可以在台式机上输入表情符号。但是谷歌浏览器中的一个新工具旨在让输入表情符号更容易一些。

chrome如何使用隐姓埋名保护自己?

chrome如何使用隐姓埋名保护自己?

Chrome的隐姓埋名让你在浏览时多了一层隐私:搜索查询不会被记住或绑定到你的谷歌个人资料。一旦关闭窗口,所有的cookies都将被丢弃。您的任何浏览历史都不会被保存。