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 远程桌面:如何接管某人的计算机

Chrome 远程桌面可让您控制计算机。它通过 Chrome 浏览器运行,适用于所有操作系统,并让您完全控制。在这篇文章中,我们将看看你可以用它做什么,你为什么想要,以及如何设置它。

谷歌浏览器怎么更换搜索引擎_更换搜索引擎方法

谷歌浏览器怎么更换搜索引擎_更换搜索引擎方法

你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道谷歌浏览器要怎么更换搜索引擎吗?来了解谷歌浏览器更换搜索引擎的具体步骤,大家可以学习一下。

重置谷歌浏览器设置在哪里

重置谷歌浏览器设置在哪里

本篇文章给大家介绍了重置谷歌浏览器至原始状态的详细操作步骤,还不清楚如何操作的朋友可以来看看详细内容。

如何在谷歌浏览器中显示日期、时间和天气?

如何在谷歌浏览器中显示日期、时间和天气?

了解天气和时间等自然现象是我们更想要的东西。因为这些东西有助于管理自己的时间安排和后续行动。毕竟时间管理是每一次成功的关键。从早期开始,人类就试图追踪天气的易变性质。经过更多研究以纠正天气预报的行为解决方案。

谷歌浏览器如何禁用自动播放视频

谷歌浏览器如何禁用自动播放视频

谷歌浏览器如何禁用自动播放视频?如果你也想要关闭自动播放视频功能可以阅读下面这篇方法步骤一览。

如何在谷歌浏览器中从图像中提取文本?

如何在谷歌浏览器中从图像中提取文本?

您现在可以在 Windows 10 和 Android 上原生地从 Google Chrome 中的图像中复制和提取文本。这可以使用处于启用状态的Native TextDetector形状检测 API来实现。您至少可以在 Chrome 76 上转换图像,而无需离开浏览器或使用任何第三方软件。