chrome高级调试技巧_前端开发用得到的小技巧

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

chrome浏览器作为前端开发者最常用的软件,相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。不信?一起来看看前端开发者最常用的软件有多厉害....


  1#. 一键重新发起请求

  在与后端接口联调或排查线上BUG时,你是不是也经常听到他们说这句话:你再发起一次请求试试,我这边看下为啥出错了!

  重发请求,这有一种简单到发指的方式。

  选中network

  点击Fetch/XHR

  选择要重新发送的请求

  右键选择Replay XHR

  不用刷新页面,不用走页面交互,是不是非常爽!!!

1

  2#. 在控制台快速发起请求

  还是联调或修BUG的场景,针对同样的请求,有时候需要修改入参重新发起,有啥快捷方式?

  选中Network

  点击Fetch/XHR

  选择Copy as fetch

  控制台粘贴代码

  修改参数,回车搞定曾经我总是通过改代码或者手写fetch的方式处理,想想真是太傻了...


  3#. 复制JavaScript变量

  假如你的代码经过计算会输出一个复杂的对象,且需要被复制下来发送给其他人,怎么办?

  使用copy函数,将对象作为入参执行即可以前我总是通过JSON.stringify(fetfishObj, null, 2)打印到控制台,再手动复制粘贴,这效率实在是太低了...


  4#. 控制台获取Elements面板选中的元素

  调试网页时通过Elements面板选中元素后,如果想通过JS知道它的一些属性,如宽、高、位置等怎么办呢?

  通过Elements选择要调试的元素

  控制台直接用$0访问

2

  5#. 截取一张全屏的网页

  偶尔咱们也会有对网页截屏的需求,一屏还好,系统自带的截屏或者微信截图等都可以办到,但是要求将超出一屏的内容也截下来咋办呢?

  准备好需要截屏的内容

  cmd + shift + p 执行Command命令

  输入Capture full size screenshot 按下回车


  掌握了这些前端开发的简单的小技巧,肯定可以帮助你在前端开发的路上如虎添翼,小编在这里祝大家前程似锦!更多谷歌浏览器教程就在chrome下载站!

相关阅读
chrome浏览器下载乱码怎么办?<解决方法>

chrome浏览器下载乱码怎么办?<解决方法>

我们在电脑上下载一些容量比较小的资源时通常会选择使用浏览器来下载,可是很多使用英文界面的谷歌浏览器或者360极速浏览器的用户在下载文件后发现文件名变成了乱码,遇到这种情况该怎么办呢?会出现文件名乱码很显然是编码的问题,这是因为(页面内容web content)的字符集编码与实际网页html文件编码不一致导致的。

Google Chrome for mac安装教程及功能介绍!

Google Chrome for mac安装教程及功能介绍!

谷歌Chrome是谷歌开发的一款简单高效的网络浏览工具。谷歌Chrome浏览器可以帮助你快速安全的搜索到你需要的内容,功能非常强大。

如何设置谷歌浏览器的下载位置

如何设置谷歌浏览器的下载位置

如何设置谷歌浏览器的下载位置?在使用浏览器的过程中,每个人都会下载东西,浏览器默认会有下载位置。

卸载谷歌浏览器之后就再也不能安装怎么办?

卸载谷歌浏览器之后就再也不能安装怎么办?

你有卸载了谷歌浏览器再次安装回来的经历吗?你知道如何解决有时卸载后无法再安装谷歌浏览器的问题嘛?来和小编一起解决问题吧!

谷歌浏览器下载了以后不能用怎么办

谷歌浏览器下载了以后不能用怎么办

我们下载了谷歌浏览器Google Chrome之后,就无法使用了。这是怎么回事,该怎么解决呢?

如何在Fedora20/21中安装谷歌chrome浏览器?

如何在Fedora20/21中安装谷歌chrome浏览器?

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

如何使用谷歌浏览器剪贴板与Android共享?

如何使用谷歌浏览器剪贴板与Android共享?

剪贴板共享于铬在桌面和机器人是一个测试功能,也称为标志或实验功能。它需要几个步骤来启用,你必须在你想要共享剪贴板的每一个设备上这样做,但是然后你可以通过几次点击或轻拍来复制和粘贴。以下是如何启用和使用Chrome剪贴板共享。

如何在 Windows 11 或 10 中禁用 Chrome 媒体弹出窗口?

如何在 Windows 11 或 10 中禁用 Chrome 媒体弹出窗口?

Chrome作为一款广受用户欢迎的网络浏览器,并非没有问题。最近,发现在这个浏览器上播放音乐或视频时,标签显示一个chrome exe框。当使用音量增大 减小或静音键时,在屏幕显示(简称OSD)音量的右边可以看到这个半透明的方框。此外,它还提供了大多数用户想要摆脱的反向、正向和播放 暂停媒体控件。

如何使用Chrome的新广告拦截器屏蔽广告?

如何使用Chrome的新广告拦截器屏蔽广告?

谷歌浏览器现在有自己的内置广告拦截器。为了消除任何混淆,谷歌解释了 Chrome 的新广告拦截器是如何工作的

chrome怎么小窗口播放视频

chrome怎么小窗口播放视频

本篇文章给大家带来Chrome浏览器设置小窗口播放视频详细教程,有需要的小伙伴赶紧来学习看看吧。

如何在 Chrome上恢复标签页:恢复您的上一个会话和页面

如何在 Chrome上恢复标签页:恢复您的上一个会话和页面

Chrome 已成为世界上最受欢迎的网络浏览器,其性能和功能优于其竞争对手。但是这种流行度的上升导致许多人在丢失或关闭 chrome 标签的情况下丢失重要的网页、研究和会话。

如何修复谷歌浏览器的字体看起来不正常

如何修复谷歌浏览器的字体看起来不正常

前几天,当我在一台新的 Windows 上安装 Google Chrome Canary 时,我立即注意到该字体在浏览器界面和我在浏览器中打开的网站上看起来不对劲。