Chrome 调试技巧

codeGoogle 发布于2019-08-21 10:45 / 2810人阅读

摘要：前言除了我们日常使用的调试方法，在中，其含有一些有意思的方法，有助于提高我们的开发调试效率。而在调试中我们可以使用是与来作为选择器，省去大串代码，如下。测试用时测试用时关闭界面

前言：
除了我们日常使用的调试方法，在Chrome中，其含有一些有意思的方法，有助于提高我们的开发调试效率。

Sources页 command + p 文件跳转

使用Sublime的人或习惯用command + p 进行文件的跳转，在chrome dev tools中其实也有类似的跳转方法。

command + p  
 
command + p + 文件名 + : + 数字

command + shift + o 任意方法跳转

Sublime中使用command +R 进行方法跳转，而在dev tools中，可以使用command + shift + o 进行任意方法的跳转。

command + shift + o  // 跳转到任意方法

注：查找某文件中的方法，使用command + p 和 command + shift + o 更配哦~

Elements页

使用方向键快，上下键导航，左右键收起展开；

H键快速隐藏dom（效果相当于给DOM加入visibility:hidden属性，有别于display:none）

Enter进行快速编辑属性；

鼠标右击使用各类方法…

Console页 $_ 表示上次的计算结果

举个栗子

15 * 15  
$_ * 10

$0 获取当前选中的DOM

选中DOM之后，在控制台输入$0。

$0

注：$1 $2 $3 是获取前几次选的dom，不常用

$(selector) 与 $$(selector) 获取当前选中的DOM

当页面没有引入jQuery等类库的时候，这是我们一般会用
document.querySelector() 或是 document.querySelectorAll() 来作用dom选择器。
而在Chrome调试中我们可以使用是$(selector) 与 $$(selector)来作为选择器，省去大串代码，如下。

$("body")
 
$$("body")

由上图实际结果看出，$()和$$()获取得到的都是满足选中条件元素的一个集合，相当于document.querySelectorAll()
注: 实验所用chrome版本：40.0.2214.111 (64-bit)

copy(Object) 拷贝对象

copy(document.body)
 
copy($0)

注: 可搭配$0来拷贝当前选择的dom，记得手动黏贴~

console.time & console.timeEnd 计算耗时

对代码执行的耗时情况进行测试时，处理手工在代码中创建前后两个时间戳进行对比，在dev tools中，我们可以使用console.time与 console.timeEnd实现。

console.time("测试用时");
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd("测试用时");

关闭Console界面

ESC…

GPU云服务器云服务器调试技巧 chrome webrtc调试 chrome webrtc 调试 javascript调试技巧

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86119.html

你不知道的Chrome DevTools（2）：那些debug的技巧

摘要：我打算把一些上使用的高级技巧写成你不知道的这一系列的博文，希望大家一起学习学习。然而，这还不是最严重的，因为的语法比较宽松和随意，所以同一功能多种写法，各种奇葩都有。总结前端在调试代码的时候，知道开发工具上的小技巧，可以提高查找问题的效率。 Web前端开发过程中必然会用到Chrome浏览器自带的开发者工具Chrome DevTools，使用它作为Web前端开发性能调试的必备工具。就连隔...

warnerwu 2019-08-19 14:38 评论0 收藏0
[译]14个你可能不知道的JavaScript调试技巧

摘要：在控制台中使用，当到达传入的函数时，代码将停止。但除了私有和匿名函数这可能是找到调试函数的最快方法。在控制台中输入，当调用时，将以调试模式停止屏蔽不相关代码现在，我们经常在应用中引入几个库或框架。译者：SlaneYang原文：https://raygun.com/javascript-debugging-tips 以更快的速度和更高的效率来调试JavaScript 熟悉工具可以让工具...

CODING 2019-08-21 17:27 评论0 收藏0
Chrome调试技巧

摘要：三如何在线映射到本进行调试在这种情况下，我们大多数时间是使用这类抓包工具进行路径的映射，或者是修改文件进行域名的跳转。一、如何查看dom元素的事件某种情况我们在页面交互上发现一个问题，肯定是非常想知道这个交互触发执行的入口，这会使我们更直接、快速的进行代码的跟踪、调试和分析。其实在chrome浏览器这很简单就实现了，如下百度一下按钮监听的事件列表：如图，我们就可以很清楚的看出百度一...

v1 2019-04-23 13:35 评论0 收藏0
Chrome 调试技巧

摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出想必大家都在用console.log在控制...

luqiuwen 2019-08-02 16:03 评论0 收藏0
Chrome 调试技巧

摘要：而就是告诉程序在那里停下来进行单步调试，俗称断点。面向，专为异步而生的断点调试功能。中的调试技巧元素的控制台书签开发者工具和都提供了书签功能，用于显示你在元素标签页或标签页中最后点击的元素。写在前面本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行 alert 这个不用多说了，不言自明 console 基本输出想必大家都在用console.log在控制...

fantix 2019-08-29 16:38 评论0 收藏0