Chrome开发工具必需知道的技巧

1, 快速切换文件

当开发工具打开后,快捷键ctrl+p打开文件

2,在源代码中搜索

希望在源代码中搜索,即在页面已经加载的文件中搜索一个特定的字符串,快捷键是ctrl+shift+F,这种搜索方式还支持正则表达式。

3,快速跳转到指定行

在source标签中打开一个文件之后,按ctrl+G,然后输入行号,就可以跳转到文件中的任意一行。

另一种方式是ctrl+o,输入:和行数,而不用去寻找一个文件。

4,在控制台选择元素

开发工具控制台支持一些变量和函数来选择DOM元素:

$()-document.querySelector()的简写,返回第一个和css选择器匹配的元素。例如:$('div')返回这个页面中第一个div元素

$$()-document.querySelectorAll()的简写,返回一个和css选择器匹配的元素数组。

$0-$4-一次返回五个最近你在元素面板选择过得DOM元素的历史记录,$0是最新的记录,以此类推

5, 使用多个插入符进行选择

当编辑一个文件的时候,你可以按住ctrl,在你要编辑的地方点击鼠标,可以设置多个插入符,这样可以一次在多个地方编辑。

6, 保存记录

勾选在console标签下的保存记录选项,你可以使开发工具里的console继续保存记录而不会再每个页面加载之后清楚记录。当你想要研究在页面还没加载完之前出现的bug时,将会很方便。

7, 优质显示

开发工具中有内建的美化代码,可以返回一段最小化且格式易读的代码。美化代码的按钮在source标签页的左下角。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1、通过CocoaPods安装项目名称项目信息 AFNetworking网络请求组件 FMDB本地数据库组件 SD...
    阳明AI阅读 16,054评论 3 119
  • 红楼梦里,不少的人物在死之前,都会灵魂出窍,和生前亲友告别一下。 若从临别赠言的价值来看,觉得要数那个谜一般死去的...
    龙少之说阅读 3,663评论 2 2
  • 三百六十五个日夜一轮回,又到了过“年”的时候 早已经没有人记得为什么要过“年”了,就像是时间再慢,也总有人忘记过往...
    张张不吃鱼阅读 1,810评论 1 3
  • Servlet 生命周期:Servlet 加载--->实例化--->服务--->销毁。 Servlet生命周期分为...
    重山杨阅读 4,119评论 0 2
  • 爱情就跟穿衣吃饭一样,每个人都有自己的偏好,但是一开始喜欢的不一定适合自己,要有一定阅历和钱财才能真正找到自己的真爱。
    毋宁罔知阅读 1,220评论 0 0

友情链接更多精彩内容