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

更新时间:2022-04-14 61 来源:谷歌浏览器官网
正文介绍

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

相关下载
谷歌浏览器电脑版 谷歌浏览器电脑版

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

相关下载
谷歌浏览器安卓版 谷歌浏览器安卓版

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

相关下载
谷歌浏览器苹果版 谷歌浏览器苹果版

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

苹果下载

跳转至官网

相关阅读
谷歌浏览器app怎么翻译网页

谷歌浏览器app怎么翻译网页

谷歌浏览器app怎么翻译网页?如果你对此也有疑问,那么可以前来阅读今天小编整理的手机谷歌浏览器翻译网页操作技巧​,欢迎感兴趣的用户前来学习。

遨游浏览器怎么关闭更新

遨游浏览器怎么关闭更新

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

360安全浏览器怎么彻底卸载

360安全浏览器怎么彻底卸载

本篇文章给大家整理了轻松卸载360安全浏览器具体操作步骤,还不清楚要如何卸载360浏览器的朋友快来了解一下吧。

谷歌浏览器夜间模式怎么设置

谷歌浏览器夜间模式怎么设置

谷歌浏览器夜间模式怎么设置?接下来小编就给大家带来谷歌浏览器开启夜间模式方法详解,感兴趣的朋友不要错过了。

微软宣布将调整Edge浏览器发行周期

微软宣布将调整Edge浏览器发行周期

微软宣布将调整Edge浏览器发行周期(谷歌将提供技术支持),就在不久前,谷歌宣布将Chrome浏览器的发行周期由6周缩短至4周。根据外媒消息,微软今日也宣布将调整自家Edge浏览器的发行周期,以配合谷歌的节奏。

怎样升级到ie8.0以上的版本

怎样升级到ie8.0以上的版本

ie浏览器 作为一款电脑自带的 浏览器 ,相信很多小伙伴对它都非常的熟悉,并且我们平时在学习或工作时也都会用到它。而有的时候我们在使用ie8浏览器查看网页时,由于一些原因,导致网页打不开,同时网页还会提示我们需要ie8等更高版本的浏览器才行。

安装谷歌浏览器错误代码“0x80004002”该如何解决?

安装谷歌浏览器错误代码“0x80004002”该如何解决?

不知道大家是否有在给电脑安装Google chrome浏览器时碰到不正确代码0X80004002的情况呢?如果你不知道如何解决?就来试试下面的这个方法吧

如何从 Ubuntu PPA 安装 Google Chrome?

如何从 Ubuntu PPA 安装 Google Chrome?

毫无疑问,谷歌浏览器是世界上最好的网络浏览器之一。它速度快、功能强大,而且看起来非常棒。Chrome 由 Google 开发和维护,可在多种平台上使用——Windows、Linux 和移动设备(Android、iOS 等)。如果您使用的是 Ubuntu 或任何其他基于 Debian Ubuntu 的发行版,您可以使用官方的 DEB 包在您的系统上轻松安装 Google Chrome。

谷歌浏览器无法定位程序输入点

谷歌浏览器无法定位程序输入点

本网站提供谷歌官网正版谷歌浏览器【google chrome】下载安装包,软件经过安全检测,无捆绑,无广告,操作简单方便。

如何下载 Google Chrome 离线安装程序

如何下载 Google Chrome 离线安装程序

如何下载 Google Chrome 离线安装程序?当您点击官方Google Chrome 下载页面上的下载 Chrome 按钮时,网络安装程序会下载到您的系统。

笔记本安装谷歌浏览器失败错误0x80004002怎么办?<解决方法>

笔记本安装谷歌浏览器失败错误0x80004002怎么办?<解决方法>

小编相信大家或多或少的都听过有人说哪个浏览器最好用——谷歌浏览器,但是当自己安装和使用谷歌浏览器时就会出现了一大堆的问题。

如何从 USB 驱动器运行 Google Chrome 操作系统?

如何从 USB 驱动器运行 Google Chrome 操作系统?

您无需购买 Chromebook 即可享受 Chrome OS 的基于网络的桌面体验。以下是从 USB 驱动器运行 Chrome OS 的方法。

10 个让 Chrome 使用更少磁盘空间的修复方法!

10 个让 Chrome 使用更少磁盘空间的修复方法!

如果您发现 Chrome 占用了过多的磁盘空间,请尝试以下十个修复程序来解决问题。

如何在 Windows 10 中使用 Chrome 将网站固定到开始和任务栏?

如何在 Windows 10 中使用 Chrome 将网站固定到开始和任务栏?

当您将网站固定到Windows中的开始和任务栏时,您可以轻松访问计算机上的特定网站。

如何第一次铸造一个Chrome标签?

如何第一次铸造一个Chrome标签?

Chromecast能够从任何电视上播放电影、电视节目、音乐等内容,这非常酷。你也可以从你的电脑投射到你的电视上。您还可以将电视变成一个巨型显示器,通过电脑或移动设备进行控制。您可以将电话屏幕、计算机中的浏览器选项卡或设备中的媒体投射到电视上。如果你正在寻找如何设置一个基本的Chrome角色,这里有谷歌的向导。这篇文章将一步一步地向你展示如何从Chrome标签直接转换到你想要的任何设备上。

谷歌浏览器与Windows笔记本不兼容怎么办

谷歌浏览器与Windows笔记本不兼容怎么办

本篇文章给大家带来解决Chrome浏览器兼容性问题的详细操作方法,大家千万不要错过了。

谷歌浏览器怎么设置自动登录?<设置发法>

谷歌浏览器怎么设置自动登录?<设置发法>

chrome浏览器是一款深受广大网友喜爱的全球知名主流网页浏览器。很多朋友为了方便,喜欢将chroem浏览器设置为自动登录模式,省去了每次都要登录的麻烦。那么具体该如果设置呢?发法很简单,有需要的朋友跟着小编一起来看看吧!

如何减少 Chrome 内存使用量?

如何减少 Chrome 内存使用量?

互联网的使用迫使用户使用各种冲浪浏览器,例如 Chrome、Firefox、Safari、Opera 等。然而,Chrome 在用户数量上位居榜首:自从它第一次发布 MS-Windows XP(当时)回到2008年,它取得了令人瞩目的人气。Chrome 也可用于其他操作系统;它于 2009 年底可用于 macOS 和 Linux。