1.元素面板中的拖放
在元素面板中,您可以拖拽任何HTML元素,并在页面上更改其位置
2.引用控制台中当前选定的元素
在元素面板中选择一个节点,在控制台中键入$0以引用它。如果你使用jQuery,你可以在这个元素上输入$($0)来访问jQueryAPI。
3.使用控制台上一个操作的值
使用$来引用在控制台执行的上一个操作的返回值
4.这是一个很好的例子。添加CSS并编辑元素状态
在元素面板中有两个超级有用的按钮。第一个选项允许您添加一个新的CSS属性和任何您想要的选择器,但预填充当前选定的元素:
第二个元素允许你为选定的元素触发一个状态,所以你可以看到当它处于活动状态、徘徊状态或者聚焦时所应用的样式。
5.保存到文件修改后的CSS
单击你编辑的CSS文件的名称。检查员将它打开到Sources窗格中,然后你可以用你所应用的实时编辑保存它。
这个技巧不适用于添加了+的新选择器,也不适用于element.style属性,但只适用于已修改的现有属性。
6.截屏一个单元素
选择一个元素并按cmd-shift-p(或Windows中的ctrl-shift-p)打开命令菜单,并选择捕获节点截图
7.使用CSS选择器找到一个元素
按cmd-f(Windows中的ctrl-f)打开元素面板中的搜索框。你可以在这里输入任何字符串来匹配源代码,或者你也可以使用CSS选择器让Chrome为你生成一个图片:
8.在控制台中输入多行命令
要写跨越控制台中多行的命令,请按shift键输入。一旦准备好了,在脚本的末尾按回车键执行它:
您可以使用控制台左上角的Clear按钮或者按ctrl-l或cmd-k来清除控制台。
在Sources中查找文件的位置
Sources来源选项:
cmd-o（在Windows中为ctrl-o）显示您的页面加载的所有文件。cmd-shift-o（Windows中的ctrl-shift-o）显示当前文件中的符号（属性，函数，类）。ctrl-g转到特定的行
10.观看表达式
不要一次又一次地写一个变量名或一个表达式,而是在调试会话期间检查很多,将其添加到表达式表达式列表中。
11.Xhr/fetch调试
从调试器打开xhr/fetchBreakpoints面板。您可以设置它打破任何时候一个xhr/fetch调用发送,或只是在特定的一个:
12.调试DOM修改
右键单击一个元素,并启用打破子树修改。每当脚本遍历元素的子元素并修改它们时,调试器就会自动停止让你检查正在发生的事情。
联系电话：