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

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

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


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

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

相关阅读
如何在win系统和 Mac 上安装和更新谷歌浏览器?

如何在win系统和 Mac 上安装和更新谷歌浏览器?

为防止在使用 Google Chrome 访问 Practice Fusion 时出现性能问题,我们鼓励用户将其浏览器更新至 Chrome 版本 59 0 3071 86。

谷歌chrome浏览器网页版怎么下载?<安装教程>

谷歌chrome浏览器网页版怎么下载?<安装教程>

就浏览器而言,相信大家都用过,也相信谷歌Chrome,这是一款在全球都非常流行的浏览器。用户使用这款浏览器可以体验到极速流畅的浏览体验。

为什么下载了谷歌浏览器打开是360?该怎么恢复?

为什么下载了谷歌浏览器打开是360?该怎么恢复?

谷歌浏览器打开为什么是360首页,这是怎么回事?最近很多小伙伴都发现自己的win10系统打开谷歌浏览器发现不是原本的页面,而是360的首页,这个原因可能是你在安装软件的过程中,装入了捆绑了相关插件的软件。

谷歌浏览器下载、安装及配置详细教程介绍!

谷歌浏览器下载、安装及配置详细教程介绍!

Google Chrome是谷歌(Google)公司研发的一个网页浏览器,该浏览器提供简单高效率的界面。其支持多标签浏览,方便用户根据需求随时打开已打开的页面进行浏览。

如何获取最新Google Chrome离线安装版?

如何获取最新Google Chrome离线安装版?

当你点击谷歌Chrome浏览器官方下载页面的下载Chrome浏览器按钮时,网络安装程序被下载到系统中。顾名思义,下载到系统中的并不是完整的谷歌Chrome离线安装包。

在程序文件中怎么安装 Google Chrome?

在程序文件中怎么安装 Google Chrome?

Google Chrome ​浏览器的用户在安装后可能无法在其硬盘驱动器上找到可执行程序。这可以归因于谷歌Chrome将自己安装在用户目录中。这样做的好处是浏览器不需要安装管理权限,缺点是需要为系统的每个用户单独安装。