[分享]Chrome调试小技巧_Android, Python及开发编程讨论区_Weblogic技术|Tuxedo技术|中间件技术|Oracle论坛|JAVA论坛|Linux/Unix技术|hadoop论坛_联动北方技术论坛  
网站首页 | 关于我们 | 服务中心 | 经验交流 | 公司荣誉 | 成功案例 | 合作伙伴 | 联系我们 |
联动北方-国内领先的云技术服务提供商
»  游客             当前位置:  论坛首页 »  自由讨论区 »  Android, Python及开发编程讨论区 »
总帖数
1
每页帖数
101/1页1
返回列表
0
发起投票  发起投票 发新帖子
查看: 2090 | 回复: 0   主题: [分享]Chrome调试小技巧        下一篇 
    本主题由 koei123 于 2015-7-14 11:05:56 移动
dream007
注册用户
等级:少校
经验:1086
发帖:53
精华:0
注册:2015-7-2
状态:离线
发送短消息息给dream007 加好友    发送短消息息给dream007 发消息
发表于: IP:您无权察看 2015-7-7 11:43:58 | [全部帖] [楼主帖] 楼主

除了我们日常使用的调试方法,在Chrome中,其含有一些有意思的方法,有助于提高我们的开发调试效率。
北京联动北方科技有限公司

Sources页 

command + p  文件跳转



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

command + shift + o  任意方法跳转



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

PS: 查找某文件中的方法,使用command + p 和  command + shift + o 更配哦~

Elements页 

1.使用方向键快,上下键导航,左右键收起展开;

2.H键快速隐藏dom(效果相当于给DOM加入visibility:

hidden属性,

有别于display:none)

3.Enter进行快速编辑属性;

4.鼠标右击使用各类方法…


Console页 

$_   表示上次的计算结果



例如:

15 * 15
$_ * 10


$0   获取当前选中的DOM



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

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



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

例如:$('body')

$$('body')


由上图实际结果看出,$()和$$()获取得到的都是满足选中条件元素的一个集合,相当于document.querySelectorAll()

PS:实验所用chrome版本:40.0.2214.111 (64-bit)

copy(Object)   拷贝对象

PS: 可搭配$0来拷贝当前选择的dom,记得手动粘贴~

console.time & console.timeEnd  计算耗时

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

关闭Console界面   ESC...

参考:http://www.alloyteam.com/2015/06/chrome-diao-shi-ji-qiao/

该贴由koei123转至本版2015-7-14 11:05:56



赞(0)    操作        顶端 
总帖数
1
每页帖数
101/1页1
返回列表
发新帖子
请输入验证码: 点击刷新验证码
您需要登录后才可以回帖 登录 | 注册
技术讨论