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

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

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

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

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

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

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

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


  1#. 一键重新发起请求

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

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

  选中Network

  点击Fetch/XHR

  选择要重新发送的请求

  右键选择Replay XHR

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

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

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

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

  选中Network

  点击Fetch/XHR

  选择Copy as fetch

  控制台粘贴代码

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


  3#. 复制JavaScript变量

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

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


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

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

  通过Elements选择要调试的元素

  控制台直接用$0访问

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

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

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

  准备好需要截屏的内容

  cmd + shift + p 执行Command命令

  输入Capture full size screenshot 按下回车


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

相关阅读
谷歌浏览器怎么收藏当前网页

谷歌浏览器怎么收藏当前网页

谷歌浏览器怎么收藏当前网页?接下来小编就给大家带来谷歌浏览器一键收藏当前网页步骤详解,大家赶紧来看看了解一下吧。

QQ浏览器怎么换皮肤?

QQ浏览器怎么换皮肤?

对于QQ浏览器怎么换皮肤这样的问题不会操作而烦恼过,相信有很多小伙伴也同样碰到过面对QQ浏览器怎么换皮肤,不知道怎样去设置

电脑谷歌浏览器好不好用

电脑谷歌浏览器好不好用

说到电脑浏览器,很多小伙伴最开始接触的应该就是IE和谷歌浏览器吧,IE浏览器不用多说,已经快要停止服务退出历史舞台了。而Chrome谷歌浏览器,现在在全球上还是有非常多的使用者,尽管在国内使用谷歌浏览器有一定的限制,但还是有不少的朋友会下载安装它。

电脑版360浏览器和手机端互通吗

电脑版360浏览器和手机端互通吗

大家都会在电脑和手机里下载一个浏览器来用,很多人都选择的是360浏览器,因为360的好口碑,让这款360浏览器也是受到了很多人的支持。360浏览器无论是哪个版本都有很多非常便于我们日常使用的功能。

如何清理QQ浏览器电脑版缓存

如何清理QQ浏览器电脑版缓存

如何清理QQ浏览器电脑版缓存?大家是否和小编一样,电脑中的QQ浏览器用着用着,就会出现越来越卡顿的现象?甚至有时出现视频画面停住不动,但声音却仍在播放的情况。

遨游浏览器怎么关闭更新

遨游浏览器怎么关闭更新

为保证用户体验,遨游浏览器一般都会设置自动更新,但如果想关闭这个功能该如何操作呢,今天就将方法分享给大家。

谷歌浏览器怎么清除浏览历史记录

谷歌浏览器怎么清除浏览历史记录

你有没有想要知道的谷歌浏览器使用技巧呢呢,你知道谷歌浏览器要怎么清除浏览历史记录吗?来了解谷歌浏览器清除浏览历史记录的具体步骤,大家可以学习一下。

如何在谷歌浏览器中关注网站?

如何在谷歌浏览器中关注网站?

上个月,谷歌宣布了一项新的实验性功能,让用户可以在 Chrome 中关注任何网站,从根本上消除了对智能手机上专用 RSS 阅读器应用程序的需求。这家软件巨头最初是在 Chrome for Android 上测试该功能。

谷歌浏览器崩溃怎么修复

谷歌浏览器崩溃怎么修复

谷歌浏览器崩溃怎么修复?下面小编就给大家带来谷歌浏览器运行崩溃解决办法,有需要的朋友快来看看了解一下吧。

如何修复谷歌浏览器中的 ERR SSL VERSION INTERFERENCE的错误?

如何修复谷歌浏览器中的 ERR SSL VERSION INTERFERENCE的错误?

ERR_SSL_VERSION_INTERFERENCE 是在Google Chrome中加载具有 SSL 协议的网站时出现的错误代码。您尝试访问的网页未打开,浏览器抛出特定代码。

如何在 Google Chrome 中启用标签组?

如何在 Google Chrome 中启用标签组?

您的浏览器中是否打开了太多选项卡?你在使用谷歌浏览器吗?然后谷歌浏览器提供了“标签组”功能。这是一种让标签保持井井有条的有趣方式。同一组下的所有选项卡都井井有条,颜色编码并带有适当的标签。

谷歌浏览器解决主页被劫持的问题<使用属性轻松解决>

谷歌浏览器解决主页被劫持的问题<使用属性轻松解决>

谷歌浏览器的主页被劫持我想是大多数人都见到过,该怎么不被劫持只显示自己希望显示的主页呢,小编这就教你