Chrome开发者工具9个调试技巧详解

对于我们前端开发者来说，Chrome自带的开发者工具绝对是不可或缺的调试工具，我们常用的调试方法包含一些console等，而Chrome自带的开发者工具其实很强大，下面我们来聊聊一些你可能不知道的使用方法。

Scroll Into View 滚动如视图内

在Elements 标签中，查看页面元素的时候，如果当前这个元素不在视图内，可以通过这个方法让这个元素快速滚入视图中。

操作：

  • 在Elements 标签页中选择一个不在视图内的元素
  • 右击，选择Scrollintoview

Copy As Fetch 复制为 Fetch

在Network 标签下的所有的请求，都可以复制为一个完整的Fetch 请求的代码。

操作：

  • 在Network 标签页中，选中一个请求
  • 右击，选择Copy –>Copyasfetch

阻塞请求

在Network 标签页下，选中一个请求，右击该请求，选择Blockrequest domain 或Blockrequest URL，可以分别阻塞该请求所在domain 下的所有请求 和 该请求。

手动给元素添加一个点击事件监听

在debug 的时候，有时候需要在元素的点击事件监听函数中，将该点击事件对象打印出来。有个更方便的方式，是可以直接在Elements 标签页为页面元素添加事件监听事件。

操作：

  • 在Elements 标签页中选中一个页面元素（选中之后，默认可以通过$0 变量获取到该元素 ）
  • 在Console 标签页中，调用函数monitorEvents，输入两个参数，第一个是当前元素（$0），第二个是事件名（click）
  • 按Enter后，当被选中的元素触发了点击事件之后，Console 标签页会将该点击事件对象打印出来

拖动页面元素

在Elements 标签页，你可以拖动任何HTML 元素，改变它在页面中的位置。

操作：如下图。

DOM 断点调试

基本上大家都会用JavaScript 的断点调试，但是应该很多人不知道DOM 节点也可以进行断点调试。ChromeDevTools提供了三种针对DOM 元素的断点调试：子元素改变时、属性改变时 和元素被移除时。

操作：

  • 在Elements 标签页，选中一个元素
  • 右击，选择 Breakon –> subtree modifications  (或attribute modifications 或node removal )

截屏

在新版本的Chrome 中，提供了一个截图的API，你可以将整个页面截图或者截取部分页面元素，且截取的图片尺寸跟浏览器当前视图中要截取的内容所占尺寸一致。截图输出的是png 格式的图片，会自动通过浏览器下载到默认的目录下。现在有三种截取的方式：截取整个页面、部分元素 或当前视图。

截取页面部分元素的操作：

  • CMD + SHIFT + P ( windows 中用 CTRL + SHIFT + P ) 打开命令菜单
  • 在Elements 标签页，选中要截取的页面元素
  • 选择 Capture node screenshot

截取完整页面的操作

  • CMD + SHIFT + P (windows 中用 CTRL + SHIFT + P ) 打开命令菜单
  • 选择 Capture full size screenshot （不需要选择页面元素）

截取当前视图内的页面

  • CMD + SHIFT + P (windows 中用CTRL + SHIFT + P) 打开命令菜单
  • 选择 Capture screenshot （不需要选择页面元素）

缓存上一步操作的结果

在ChromeDevTools 上运行JavaScript 表达式的时候，可以使用$_ 来获取到上一步操作的返回值。

Overrides 重写

在ChromeDevTools上调试css 或JavaScript时，修改的属性值在重新刷新页面时，所有的修改都会被重置。如果你想把修改的值保存下来，刷新页面的时候不会被重置，那就看看下面这个特性（Overrides）吧。Overrides 默认是关闭的，需要手动开启，开启的步骤如下。

开启的操作：

  • 打开ChromeDevTools 的Sources 标签页
  • 选择Overrides 子标签
  • 选择+Selectfolderforoverrides，来为Overrides 设置一个保存重写属性的目录

ChromeDevTools 中有很多调试的小技巧，如果细数的话，至少有几十种。ChromeDevTools是前端开发的测试一大利器，希望大家能灵活运用

赞 (0)

相关推荐

  • 9种使用Chrome Firefox 自带调试工具调试javascript技巧

    我们调试Javascript一般会用到Chrome或Firefox自带的调试工具,本文列出了几条用于调试Javascript的技巧,掌握它们,让我们花更少的时间来解决错误和bug,从而提高开发效率. 1. debugger 除了console.log, debugger是我们最喜欢.快速的调试工具.执行代码后,Chrome会在执行时自动停止.你甚至可以把它封装成条件,只在需要时才运行. if (thisThing) { debugger; } 2. 用表格显示对象 有时, 有一组复杂的对象要查看

  • 使用Chrome调试JavaScript的断点设置和调试技巧

    使用Chrome调试JavaScript的断点设置和调试技巧

    你是怎么调试 JavaScript 程序的?最原始的方法是用 alert() 在页面上打印内容,稍微改进一点的方法是用 console.log() 在 JavaScript 控制台上输出内容.嗯~,用这两种土办法确实解决了很多小型 JavaScript 脚本的调试问题.不过放着 Chrome 中功能越发强大的开发者工具不用实在太可惜了.本文主要介绍其中的 JavaScript断点设置和调试功能,也就是其中的 Sources Panel(以前叫 Scripts).如果你精通 Eclipse 中的各

  • 详解Chrome 实用调试技巧

    如今Chrome浏览器无疑是最受前端青睐的工具,原因除了界面简洁.大量的应用插件,良好的代码规范支持.强大的V8解释器之外,还因为Chrome开发者工具提供了大量的便捷功能,方便我们前端调试代码,我们在日常开发中是越来越离不开Chrome,是否熟练掌握Chrome调试技巧恐怕也会成为考量前端技术水平的标杆. 介绍Chrome调试技巧的文章很多,本文结合我自己的开发经验,希望从实际运用的角度为大家再一次谈一谈这些功能,也希望对大家都有所帮助和启发. 常用快捷键 ctrl+p项目中定位文件,以下查找

  • Chrome浏览器控制台console使用详解

    Chrome浏览器控制台console使用详解

    Chrome自带的开发者工具提供了强大的调试系统,除了可以用来查看DOM tree结构.CSS样式调试.动画调试和JS代码断点调试等.今天不聊别的,就聊聊使用console调试那些事儿. 在使用React.Vue等需要编译语法的前端框架开发时,前端调试已经变得不那么容易,除了使用React Dev Tools,Vue Dev Tools和Redux Dev Tools等Chrome插件,就是一堆的 console.log() 来打印我们需要看到的变量,虽然也有用,但是比较单一,要调试复杂数据需要

  • 利用chrome浏览器进行js调试并找出元素绑定的点击事件详解

    前言 大家有没有遇到这样的一个问题,我们在分析一些大型电子商务平台的Web前端脚本时,想找到一个元素绑定的点击事件,并不是那么容易,因为有些前端脚本封装的比较隐蔽,甚至有些加密脚本,用传统的查找元素ID.或者页面源码方法去找,可能最后徒劳无功.下面我来介绍利用chrome浏览器来查找元素绑定的事件. Chrome开发工具中最有用的面板Sources.Sources面板几乎是最常用到的Chrome功能面板,也是解决一般问题的主要功能面板.通常只要是开发遇到了js报错或者其他代码问题,在审视一遍代码

  • 基于Python开发chrome插件的方法分析

    基于Python开发chrome插件的方法分析

    本文实例讲述了基于Python开发chrome插件的方法.分享给大家供大家参考,具体如下: 谷歌Chrome插件是使用HTML.JavaScript和CSS编写的.如果你之前从来没有写过Chrome插件,我建议你读一下这个.在这篇教程中,我们将教你如何使用Python代替JavaScript. 创建一个谷歌Chrome插件 首先,我们必须创建一个清单文件:manifest.json. { "manifest_version": 2, "name": "Py

  • Chrome 调试技巧(小结)

    写在前面 本文包括浏览器调试,不包括web移动端调试. 本文调试均在chrome浏览器进行 alert 这个不用多说了,不言自明 console基本输出 想必大家都在用console.log在控制台输出点东西,其实console还有其它的方法: console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在控制台打印自定义错误信息 console.info("我是个信息");//在控制

  • 通过chrome浏览器控制台(Console)进行PHP Debug的方法

    通过chrome浏览器控制台(Console)进行PHP Debug的方法

    效果如下图 PHP Console是一款可以帮助用户模拟真实的PHP网站运行环境,帮助用户使用Chrome插件对PHP代码进行调试的Chrome插件,用户在Chrome中安装了PHP Console插件以后,可以在自己的PHP项目中引用PHP Console项目代码,并输出调试信息,让PHP Console插件进行捕获,这样在网站发布成功以后,还可以使用PHP Console插件进行输出调试信息到Chrome浏览器中,用户可以通过PHP Console插件来查看这些来自于PHP服务器发来的调试日

  • Chrome开发者工具9个调试技巧详解

    Chrome开发者工具9个调试技巧详解

    对于我们前端开发者来说,Chrome自带的开发者工具绝对是不可或缺的调试工具,我们常用的调试方法包含一些console等,而Chrome自带的开发者工具其实很强大,下面我们来聊聊一些你可能不知道的使用方法. Scroll Into View 滚动如视图内 在Elements 标签中,查看页面元素的时候,如果当前这个元素不在视图内,可以通过这个方法让这个元素快速滚入视图中. 操作: 在Elements 标签页中选择一个不在视图内的元素 右击,选择Scrollintoview Copy As Fet

  • JS检测浏览器开发者工具是否打开的方法详解

    在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理.本篇文章主要讲述几种前端JS检测开发者工具是否打开的方法.  一.重写toString() 对于一些浏览器,比如Chrome.FireFox,如果控制台输出的是对象,则保留对象的引用,每次打开开发者工具的时候都会重新调用一下对象的toString()方法将返回结果打印到控制台(console tab)上. 所以只需要创建一个对象,重写它的to

  • kotlin开发cli工具小技巧详解

    目录 脚手架 开搞 开发调试 jcommander Main 函数声明 压缩模板 放飞自我 生成最终产物 结尾 脚手架 脚手架是为了保证各施工过程顺利进行而搭设的工作平台 而在程序开发过程中,每个工程或者说公司也都需要一个脚手架工具.通过脚手架命令行的形式简化开发流程,避免发生一些人为的相对低级的问题,所以这个也就是为什么叫做脚手架的原因吧. 而由于每个公司的代码规范都不同,一般情况下会主动让开发同学进行工程方面的cv操作,就是成本高并且容易出错.这也就是为什么我们打算写一些这样的工具的原因.

  • myeclipse8.5优化技巧详解

    还在为自己的配置低而抛弃MyEclipse8.5?还在为那低下的速度而苦恼吗?下面我们看看myeclipse8.5优化技巧的具体方法. 取消自动validation validation有一堆,什么xml.jsp.jsf.js等等,我们没有必要全部都去自动校验一下,只是需要的时候才会手工校验一下! 取消方法: windows–>perferences–>myeclipse–>validation 除开Manual下面的复选框全部选中之外,其他全部不选 手工验证方法: 在要验证的文件上,单

  • Python 开发工具PyCharm安装教程图文详解(新手必看)

    PyCharm是由JetBrains打造的一款Python IDE,VS2010的重构插件Resharper就是出自JetBrains之手. 同时支持Google App Engine,PyCharm支持IronPython.这些功能在先进代码分析程序的支持下,使 PyCharm 成为 Python 专业开发人员和刚起步人员使用的有力工具. PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳

  • python 工具类之Queue组件详解用法

    python 工具类之Queue组件详解用法

    目录 简述 环境 单向队列 先进后出队列 优先级队列 双向队列 完整代码 总结 简述 队列一直都是工程化开发中经常使用的数据类型,本篇文章主要介绍一下python queue的使用,会边调试代码,边说明方法内容. 环境 python: 3.6.13 单向队列 初始化单向队列 放置一些数据 可以使用full()方法判断队列是否已经塞满数据,可以通过qsize()方法查看队列内元素数量. 这时候我们从队列取出数据,看先取到的是什么. 现在队列里面只有两个数,我们再塞入3个数看一下. 这个时候我们继续

  • Android Studio真机无线连接USB设备调试运行详解流程

    Android Studio真机无线连接USB设备调试运行详解流程

    前言 一般情况下,多数移动开发者使用的是数据线连接电脑,进行各种移动设备的调试,更有胜者,非常迷恋模拟器,模拟器它好不好,答案是好,因为直接运行在电脑上,直接操作,调试,确实方便.尤其是ios开发小伙伴,多数app通过模拟器基本上都能开发好,再用真机验证就可以了.但对于android,就比较恼火了,模拟器一直不好用,卡.慢都是影响撸码的心情.另外android设备随便弄个便宜的都是容易的,基本上是真机开发.那么非一般情况呢,例如我们使用了NDK也就是C层的代码时,由于架构匹配方面,需要用真机开发

  • Golang 内存管理简单技巧详解

    目录 引言 预先分配切片 结构中的顺序字段 使用 map[string]struct{} 而不是 map[string]bool 引言 除非您正在对服务进行原型设计,否则您可能会关心应用程序的内存使用情况.内存占用更小,基础设施成本降低,扩展变得更容易/延迟. 尽管 Go 以不消耗大量内存而闻名,但仍有一些方法可以进一步减少消耗.其中一些需要大量重构,但很多都很容易做到. 预先分配切片 数组是具有连续内存的相同类型的集合.数组类型定义指定长度和元素类型.数组的主要问题是它们的大小是固定的——它们

  • vue3 name 属性的使用技巧详解

    目录 引言 使用步骤 引言 如果你在 vue3 开发中使用了 <script setup> 语法的话,对于组件的 name 属性,需要做一番额外的处理. 对于 vue@3.2.34 及以上版本,在使用 <script setup> 的单文件组件时,vue 会根据组件文件名,自动推导出 name 属性.也就是名为 MyComponent.vue 或 my-component.vue 的文件, name 属性为 MyComponent,而当你在组件内显示定义 name 属性时,会覆盖推

  • Spring扩展BeanFactoryPostProcessor使用技巧详解

    目录 1.Spring 扩展点 BeanFactoryPostProcessor 使用技巧 1.1.BeanDefinitionRegistryPostProcessor 1.1.1.ScannedGenericBeanDefinition 1.1.2.AnnotatedGenericBeanDefinition 1.1.3.RootBeanDefinition 1.2.环境变量 Environment 1.Spring 扩展点 BeanFactoryPostProcessor 使用技巧 方法

随机推荐