Chrome开发工具提供了一套非常棒的工具,可以帮助您在Web平台上进行开发。以下是一些你可能还不知道的建议
在ELEMENTS面板中拖放
在Elements面板中,您可以拖放任何HTML元素并更改其在页面上的位置
引用控制台中当前选择的元素
在Elements面板中选择一个节点,并在控制台中键入$0来引用它。
提示:如果使用jQuery,可以输入$($0)来访问这个元素上的jQuery API。
使用控制台中最后一个操作的值
使用$_引用在控制台中执行的前一个操作的返回值
添加CSS并编辑元素状态
在元素面板中有两个超级有用的按钮。 第一个选项允许您添加一个新的CSS属性,使用您想要的任何选择器,但要预先填充当前选定的元素: 第二个选项允许您为所选元素触发一个状态,这样您就可以看到当它处于活动状态、悬停状态、焦点状态时应用的样式。
找到定义CSS属性的位置
在元素面板中的CSS属性,DevTools将指向定义该属性的地方,即源面板
保存并归档修改后的CSS
单击您编辑的CSS文件的名称。检查器将它打开到Sources窗格中,然后您可以在应用的实时编辑中保存它。 这个技巧不适用于使用+或元素添加的新选择器。样式属性,但仅适用于已修改的现有属性。
屏幕截图一个元素
选择一个元素并按下cmd-shift-p(或在Windows中按ctrl-shift-p)打开命令菜单,然后选择Capture node截图
使用CSS选择器查找元素
按下cmd-f(在Windows中ctrl-f)将在Elements面板中打开搜索框。 你可以在里面输入任何字符串来匹配源代码,或者你也可以使用CSS选择器让Chrome为你生成一个图像:
在控制台中SHIFT-ENTER
要在控制台中编写跨越多行代码的命令,请按shift-enter。 一旦你准备好了,按下回车在脚本的最后,以执行它:
清除控制台
您可以使用控制台左上角的clear按钮清除控制台,或者按ctrl-l或cmd-k。
GO TO…
在资源面板:
- 显示页面加载的所有文件。
- 显示当前文件中的符号(属性、函数、类)。
- ctrl-g转到特定的行。
监视表达式
在调试过程中,您将多次检查变量名或表达式,而不是一次又一次地编写变量名或表达式,而是将其添加到监视表达式列表中。
XHR /获取调试
从调试器中打开XHR/Fetch断点面板。 您可以将它设置为在发送XHR / Fetch调用时断开,或者仅在特定的调用上:
对DOM修改的调试
右键单击元素并在子树修改上启用Break:每当脚本遍历该元素的子元素并修改它们时,调试器都会自动停止,以便让您检查发生了什么。