Chorme dev tools小技巧

1.快速稳健转换：打开DevTools,按下Ctrl+P来快速寻找和打开你工程中的任意文件。

2.在源代码中搜索：打开DevTools,按下Ctrl+Shift+F,即可在所有已加载文件中查找一个特定的字符串，这个搜索的方法也支持正则表达式。

3.调整到特定的行数：打开一个源标签的文件后，DevTools能够允许你轻松跳转到代码中的任意一行。只需按下Ctrl+G，输入行数即可。

另一种Ctrl+o也可实现，输入”:行数”即可。

4.在控制台选择元素：DevTools控制台支持一些变量和函数来选择DOM元素

　　4-1：$()：document.querySelector()缩写，返回第一个与之匹配的CSS选择器的元素（例如：$(‘div’) 但会本页面的第一个div元素）。

　　4-2：$$():   document.querySelectorAll()的缩写，返回一个数组，里面有与之匹配的CSS选择器的元素。

　　4-3：$0----$4依次返回五个最近你在元素面板中选择过的DOM元素的历史记录，$0是最新的记录，以此类推。

5.使用多个光标和选择：当你在编辑一个文件的时候，你可以通过Ctrl,同时点击你想让光标停留的位置，设置多个光标，这样你可以同时在多个位置输入同一文本。

6.保存记录：勾选在Console标签下的保存记录选项，你可以使Console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没有加载完之前出现的bug时，这会是一个方便的方法。

7.漂亮的打印：Chrome的开发者工具有一段嵌入的美化代码，它可以帮你返回一段最小化的且格式易读的代码，这个漂亮的印刷按钮在你正确打开文件之后的Sources标签下的左下角。

8.设备模式：DevTools包括了一个强大的模式可用于开发友好的移动端界面，这是来自谷歌的视频介绍了它最主要的功能，有调整大小，触摸仿真和模拟糟糕的网络连接。

9.设备仿真传感器：设备模式的另一个很酷的功能就是模拟移动设备的传感器，例如触摸屏幕和加速器，可以恶搞你的地理位置。点击“show Drawer”按钮，就可以看见Emulation标签àSensors.

10.颜色选择器：当我们在样式编辑器中选择一种颜色时，你可以点击颜色预览，颜色选择器则会弹出。当颜色选择器开启时，如果你停留在某一页面，你的鼠标指针就会转换成一个放大镜，选择像素精度的颜色。

11.元素状态：DevTools有一个功能是模拟CSS状态，如在元素中的hover和focus，这能够容易的设计他们的样式。

•:link代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。

•:visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式

•重点是下面这几个：

•:focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个我们可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式

•:hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，因为hover排在后，会覆盖focus样式。

如果:hover排在前，:focus排在后，则当光标获得焦点时显示:focus的样式，但当光标经过链接时，样式并未显示:hover的样式，而是继续是:focus的样式，因为应用的focus样式在hover之后，覆盖了前面的样式。

12.可视化Shadow DOM:由于其他基础的元素在视图中正常的隐藏，网页浏览器构建例如文本框，按钮和输入框之类的东西。不过，你可以在setting->General中切换”show user agent shadow DOM”,这样就会在元素标签中显示被隐藏的代码。

　　eg:<input type=“range”>

13.选择下一个匹配项：当你在sources标签下编辑文件时，如果你按下Ctrl+D，下一个匹配项也会被选中，这只能够帮助你同时编辑他们。

14.改变颜色格式：在颜色预览中使用shift+click，可以在rgba,hsl和hexadecimal这三种格式中改变。

15.通过workspaces来编辑本地文件：Workspaces是一个强大的Chrome DevTools的功能，这使它成为一个真正的IDE。Workspaces使Sources标签下的文件和你本地的工程文件相匹配。所以现在你可以直接编辑和保存，而不用复制粘贴到外部的文本编辑器。

配置Workspaces，你只需要去Sources标签下，在左边的控制面板的任何地方点击右键（Sources标签下），选择Add Folder To Workspaces。

详见：https://developer.chrome.com/devtools/docs/workspaces

16.样式修改并保存到本地

•首先在styles模式下找到你需要修改的元素；

•点击样式文件进入该样式文件的sources文件（必须是独立的样式文件）；

•修改后可以查看文件differ，并可以选择覆盖重置操作（上述修改记录只保存在浏览器中，非源文件）；

•若需保留修改至源文件，则可以save  as 到源文件地址，直接覆盖即可。

 

快捷键：

•打开开发工具：F12，Ctrl+shift+I

•检查元素模式/浏览器模式切换：Ctrl+Shift+C

•控制台切换：Ctrl+Shift+J

•显示设置回话：？/F1

•上/下一个面板：Ctrl+[   /   Ctrl+]

•返回上/下一个面板：Ctrl+Shift+[  /   Ctrl+Shift+]

•改变开发工具面板位置：Ctrl+Shift+D

•打开设备模式：Ctrl+Shift+M

•切换Console面板开关以及关闭设置对话框：ESC

•刷新页面：F5/Ctrl+R

•清除缓存内容并且刷新页面：Ctrl+F5/ Ctrl+Shift+R

•在当前文件或者面板中搜索：Ctrl+F

•全局搜索：Ctrl+Shift+F

•搜索文件名：Ctrl+O

•放大/缩小：Ctrl+ + / Ctrl+ -

•恢复设置文本大小：Ctrl+0

以下是针对Elements面板

•撤销：Ctrl+Z

•取消撤销：Ctrl+Y

•导航：UP/Down

•展开/折叠节点：Right/Left

•一次打开该节点的所有子节点：Ctrl+Alt+点击节点

•编辑属性：双击或者Enter

•隐藏元素：H

•编辑模式切换：F2

•插入新的属性：single-click on whitespace

•编辑规则：single-click

•Source中查看该样式属性：Ctrl+Click on property value

更过快捷方式：详见

https://developer.chrome.com/devtools/docs/shortcuts

console API参考：

•Console.assert(expression,object):如果指定的表达式是错误的,将消息写入控制台以及一个堆栈跟踪

Eg:Var list=document.querySelector(“#myList”);

Console.assert(list.childNodes.length<10,”list item count is>=10”);

•Console.clear();清理控制台

•Console.count(label):写的次数计数

Eg:function login(user){console.count(“Login called”);}

Login();

•Console.dir(object)

Eg:console.dir(document.body);

等价于：console.log("document body: %O", document.body);

•console.dirxml(object)

•console.error(object [, object, ...])

•console.group(object[, object, ...])

•console.groupCollapsed(object[, object, ...])

•console.info(object [, object, ...])

• console.profile([label])

•console.time(label)

…………

详见：https://developer.chrome.com/devtools/docs/console-api

http://www.admin10000.com/document/6159.html