chrome高级调试技巧_前端开发用得到的小技巧
chrome浏览器作为前端开发者最常用的软件,相信你一定不陌生。调页面、写BUG、画样式、看php片少了它整个世界都不香了。不信?一起来看看前端开发者最常用的软件有多厉害....
1#. 一键重新发起请求
在与后端接口联调或排查线上BUG时,你是不是也经常听到他们说这句话:你再发起一次请求试试,我这边看下为啥出错了!
重发请求,这有一种简单到发指的方式。
选中network
点击Fetch/XHR
选择要重新发送的请求
右键选择Replay XHR
不用刷新页面,不用走页面交互,是不是非常爽!!!

2#. 在控制台快速发起请求
还是联调或修BUG的场景,针对同样的请求,有时候需要修改入参重新发起,有啥快捷方式?
选中Network
点击Fetch/XHR
选择Copy as fetch
控制台粘贴代码
修改参数,回车搞定曾经我总是通过改代码或者手写fetch的方式处理,想想真是太傻了...
3#. 复制JavaScript变量
假如你的代码经过计算会输出一个复杂的对象,且需要被复制下来发送给其他人,怎么办?
使用copy函数,将对象作为入参执行即可以前我总是通过JSON.stringify(fetfishObj, null, 2)打印到控制台,再手动复制粘贴,这效率实在是太低了...
4#. 控制台获取Elements面板选中的元素
调试网页时通过Elements面板选中元素后,如果想通过JS知道它的一些属性,如宽、高、位置等怎么办呢?
通过Elements选择要调试的元素
控制台直接用$0访问

5#. 截取一张全屏的网页
偶尔咱们也会有对网页截屏的需求,一屏还好,系统自带的截屏或者微信截图等都可以办到,但是要求将超出一屏的内容也截下来咋办呢?
准备好需要截屏的内容
cmd + shift + p 执行Command命令
输入Capture full size screenshot 按下回车
掌握了这些前端开发的简单的小技巧,肯定可以帮助你在前端开发的路上如虎添翼,小编在这里祝大家前程似锦!更多谷歌浏览器教程就在chrome下载站!
谷歌浏览器轻量版下载包获取和安装操作方法
谷歌浏览器轻量版提供下载包获取和安装操作方法,用户可在低配置系统上高效完成安装及基础设置,节省系统资源,保证浏览器运行流畅,提高操作效率。
Chrome浏览器如何提升网页视频加载速度
Chrome浏览器提升网页视频加载速度,优化加载体验并提高播放流畅度。
Chrome浏览器下载文件路径自动调整与管理
Chrome浏览器提供自动识别机制,根据文件类型与任务来源智能调整保存路径,优化文件存储结构。
如何清除Chrome中的站点设置数据
本文将介绍如何清除Chrome浏览器中的站点设置数据,帮助用户清理缓存和网站设置,从而提高浏览器性能。步骤清晰明了,适合所有Chrome用户操作。
谷歌浏览器怎么全屏
本文将详细介绍如何在谷歌浏览器中开启全屏模式,通过简单的步骤帮助您轻松实现浏览器的全屏显示,提升您的浏览体验。
Google Chrome如何通过智能推荐提升网页加载体验
通过智能推荐功能,Chrome浏览器会自动分析用户的浏览习惯,并优化网页加载顺序,从而加速网页加载,提供更顺畅的浏览体验。
谷歌浏览器如何使用国内镜像下载?谷歌浏览器使用国内镜像方法一览
很多用户都需要使用谷歌搜索来查找一些英语学习资料,但是由于某些原因在国内无法使用。今天小编给大家分享另一种可以在国内使用Google搜索的方法,那就是使用Google镜像网站。
谷歌浏览器下载安装完成后无法上网如何解决?<解决方法>
谷歌浏览器,又称Google浏览器、Chrome浏览器,是谷歌Google推出的一款强大好用的基于Chromium内核的网页浏览器。
macbook安装谷歌浏览器无法打开网页如何解决?
谷歌浏览器因其强大的功能、界面简洁等特点,很多使用macbook的用户都会在自己的电脑中安装这款浏览器,但是在操作的过程中我们无法避免会出现一些问题。
google浏览器怎么开启增强型保护功能
许多小伙伴为了保护自己上网安全都会开启谷歌里内置的增强型保护功能。但还有些小伙伴不了解怎么设置。下面就来教大家快速开启的方法。
怎么找到Chrome浏览器的阅读清单功能
本篇文章给大家带来Chrome浏览器打开阅读清单功能教程详解,感兴趣的朋友快来看看了解一下吧。
谷歌浏览器的密码管理工具在哪里
谷歌浏览器的密码管理工具在哪里?有些小伙伴可能不清楚谷歌浏览器的密码管理工具在哪里,今天小编就为大家带来了具体位置说明。
如何在谷歌Chrome中添加Tab悬停卡?
与Chrome和Firefox浏览器相比,微软Edge有许多漂亮的功能。其中一个功能是选项卡悬停卡,当您将鼠标悬停在非活动选项卡上时,它会显示选项卡内容的图像预览。这将有助于在您打开多个标签时快速检查网页。
如何在 Google Chrome 中启用 NTP 自定义菜单版本 2?
Google Chrome提供了一个新选项,可让您修改新标签页的外观(简称 NTP)。此自定义菜单称为版本 2,可在 Chrome 76 和更高版本中使用。基本上,该功能通过保持以前的选项相同,用自定义窗口替换了经典的弹出菜单。
谷歌浏览器如何下载在线音频视频_谷歌浏览器下载视频方法
在网上看到了喜爱的视频却没有找到下载链接该怎么办呢,一个方法教你如何想下什么视频就下什么视频,快来学学吧!
谷歌浏览器如何禁用flash?flash禁用方法介绍
最近,频频爆出的安全漏洞,让flash的存在感越来越低,甚至曾经有一个Flash安全漏洞被曝可用于向Windows PC传送勒索软件。很多公司和个人用户也因此选择禁用flash!那么,在谷歌浏览器中如何操作禁用flash呢?下面就让我们一起来看看,了解一下吧!
如何在 Windows 10 中使用 Chrome 将网站固定到开始和任务栏?
当您将网站固定到Windows中的开始和任务栏时,您可以轻松访问计算机上的特定网站。
如何设置谷歌浏览器自动清理缓存
本篇文章给大家详细介绍了谷歌浏览器设置自动清理缓存的方法步骤,有需要的朋友快来看看吧。