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

相关阅读
怎么下载谷歌浏览器_谷歌浏览器快速下载方法

怎么下载谷歌浏览器_谷歌浏览器快速下载方法

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

安装不了谷歌浏览器怎么办_谷歌浏览器安装失败解决方法

安装不了谷歌浏览器怎么办_谷歌浏览器安装失败解决方法

你有没有在使用谷歌浏览器的时候遇到各种问题呢,你知道谷歌浏览器安装失败是怎么回事呢?来了解谷歌浏览器安装失败的解决方法,大家可以学习一下。

谷歌浏览器怎么更换主题背景

谷歌浏览器怎么更换主题背景

本篇文章给大家详细介绍了谷歌浏览器自定义主题背景的具体流程,对此感兴趣的朋友快来看看吧。

谷歌浏览器下载、安装及配置详细教程介绍!

谷歌浏览器下载、安装及配置详细教程介绍!

Google Chrome是谷歌(Google)公司研发的一个网页浏览器,该浏览器提供简单高效率的界面。其支持多标签浏览,方便用户根据需求随时打开已打开的页面进行浏览。

为什么下载了谷歌浏览器打开是360?该怎么恢复?

为什么下载了谷歌浏览器打开是360?该怎么恢复?

谷歌浏览器打开为什么是360首页,这是怎么回事?最近很多小伙伴都发现自己的win10系统打开谷歌浏览器发现不是原本的页面,而是360的首页,这个原因可能是你在安装软件的过程中,装入了捆绑了相关插件的软件。

Chrome离线安装包怎么下载

Chrome离线安装包怎么下载

谷歌的Chrome​浏览器采用了开源的Chromium内核技术,加入了自研的沙盒保护技术,网页的多进程保护功能,自带Flash player插件,拥有极快的上网体验。

谷歌浏览器的前端开发小技巧!<教你如何在调试技巧上进步!>

谷歌浏览器的前端开发小技巧!<教你如何在调试技巧上进步!>

前端开发者都爱的谷歌浏览器,谷歌浏览器有哪些调试小技巧呢,快来学学吧!

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

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

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

如何确保 Google Chrome 的 Flash 插件是最新的?

如何确保 Google Chrome 的 Flash 插件是最新的?

Google 和 Adobe 已将原生 Flash 插件集成到 Google Chrome 浏览器中。这种集成为计算机用户提供了两个好处和一个缺点。集成的 Flash 插件意味着用户不再需要在 PC 上安装 Flash。这也是有益的,因为插件的更新发生在后台,而不必由用户启动。

如何自定义 Chrome 启动页

如何自定义 Chrome 启动页

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

如何在 Chrome 中停止禁用开发者模式扩展?

如何在 Chrome 中停止禁用开发者模式扩展?

禁用开发者模式扩展是一条警告消息,当您从Chrome Web App Store之外安装该扩展时,Chrome会显示这条消息。Chrome不信任不是来自Chrome在线应用商店的扩展,并将其视为恶意软件。因此,作为一项安全措施,它会在每次启动浏览器时显示此消息。

如何使用 Google Keep Chrome 扩展程序?

如何使用 Google Keep Chrome 扩展程序?

Google Keep 的 Chrome 扩展程序可以帮助您提高工作效率并做更好的笔记。以下是如何使用扩展程序。