栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > C/C++/C#

Chrome调试小技巧

C/C++/C# 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Chrome调试小技巧

前言:

除了我们日常使用的调试方法,在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…

原文源自:AlloyTeam——http://www.alloyteam.com/2015/06/chrome-diao-shi-ji-qiao/

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/233868.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号