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

更新时间:2022-04-14 84 来源:克罗米部落
正文介绍

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下载站!

相关阅读
CentOS入门,新手如何下载Chrome浏览器?

CentOS入门,新手如何下载Chrome浏览器?

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

如何从官网下载安装64位Google Chrome中文版?

如何从官网下载安装64位Google Chrome中文版?

谷歌浏览器,又称Google浏览器、Chrome浏览器,是谷歌Google推出的一款强大好用的基于Chromium内核的网页浏览器。

怎么下载谷歌浏览器

怎么下载谷歌浏览器

你有没有想要知道的谷歌浏览器下载安装教程呢,你知道谷歌浏览器要怎么下载吗?来了解下载谷歌浏览器的具体步骤,大家可以学习一下。

谷歌浏览器如何访问实验室功能

谷歌浏览器如何访问实验室功能

谷歌浏览器如何访问实验室功能?如果你想访问这些功能可以参考下面的访问图文教程一览。

edge无法下载谷歌浏览器怎么办?<解决方法>

edge无法下载谷歌浏览器怎么办?<解决方法>

对于用户使用的电脑,大部分都有自己的edge浏览器,可以让用户在edge浏览器中下载软件。比如有的用户会在edge中下载自己想要的chrome浏览器,但是有一个问题就是下载不了。那么edge无法下载chrome该怎么办呢?下面小编就和大家分享edge无法下载chrome的解决方法。

如何下载最新版本的谷歌浏览器

如何下载最新版本的谷歌浏览器

如何下载最新版本的谷歌浏览器?在这个浏览器错综复杂的年代,Google Chrome是我们在生活中经常用到的一个软件,Google Chrome是由Google开发的一款设计简单、高效的Web浏览工具。

谷歌浏览器安装Selenium IDE插件_Selenium IDE插件用法

谷歌浏览器安装Selenium IDE插件_Selenium IDE插件用法

Selenium IDE插件是一款支持在谷歌浏览器上运行的专业插件,提供浏览器脚本的录制,回放以及编辑脚本功能,以及浏览器元素的定位,小编这就为你介绍安装教学及基础实例

如何在Windows 10系统启用chrome黑暗模式?

如何在Windows 10系统启用chrome黑暗模式?

你知道谷歌浏览器吗,你了解谷歌浏览器吗?你有没有想使用谷歌浏览器却不会启用chrome黑暗模式的问题,来和小编一起了解下启用chrome黑暗模式的具体操作步骤吧,大家可以学习收藏一下。

如何在 Chrome 中更改书签图标

如何在 Chrome 中更改书签图标

在网络浏览器中为页面添加书签非常有用,并且是浏览互联网挖掘机的人们更常用的功能之一,可以保存有趣的网站和页面以供以后阅读。然而,通常情况下,网站使用的网站图标在 Chrome 的书签栏上看起来并不那么好。

如何自定义 Chrome 启动页

如何自定义 Chrome 启动页

如何自定义 Chrome 启动页?Chrome 是谷歌流行的浏览器,具有许多一流的功能。这些功能通常隐藏在 Chrome 浏览器中,在您打开它们之前不会显示。

如何检查 Android 上的 Chrome 是 32 位还是 64 位?

如何检查 Android 上的 Chrome 是 32 位还是 64 位?

谷歌计划在不久的将来将公司 Chrome 网络浏览器在 Android 上的安装从 32 位迁移到 64 位。虽然迁移仅限于运行 Android 10 或更高版本的设备,但它应该会对浏览器的性能和安全性产生积极影响。

如何使用3个隐藏开关清除 Chrome 缓存?<使用方法>

如何使用3个隐藏开关清除 Chrome 缓存?<使用方法>

为了获得最佳浏览器性能,您应该定期清除缓存。这里有三个隐藏的开关,可让您在不中断工作流程的情况下这样做。