顾名思义，Chrome开发者工具是一个让网页开发者可以通过浏览器应用程序对网页进行干预和操作的工具，也可以通过这个工具调试和测试网页或网页应用程序程序。使用此工具，您可以做很多有趣的事情：◆调试界面问题◆使用断点调试JavaScript代码◆优化您的代码打开开发者工具，您只需在页面任意位置右击并选择InspectElement或选择“工具”>更多工具>开发人员工具”从右上角的菜单。下面的例子都是在GoogleChrome的Canary浏览器下做的demo。1.快速编辑HTML元素试试看：◆选择“元素”面板◆在“元素”面板中选择一个DOM元素◆双击需要打开的DOM元素标签，即可编辑，完成后会自动更新并关闭标签2.到指定行数你可以在“Sources”面板中指定文件中使用函数“:行数:列数”。试试快捷键CMD+O。3.展开所有子节点试试：◆选择“元素”面板◆选择DOM元素在有剪头的位置按住Alt+点击鼠标左键，即可展开所有子节点4.改变开发者工具的位置试试试试快捷键：CMD+Shift+D设置开发者工具有3个选项：◆不在窗口显示开发者工具◆显示窗口右侧的开发者工具◆在窗口底部显示开发者工具#p#5。通过CSS选择器搜索DOM元素试试快捷键：CMD+F/CTRL+F输入你需要的类名或ID名，就可以搜索到对应的选择器。6.Materialandcustomcolorpalette你可以点击颜色代码前面的小图标，你可以选择：PageColor：这个面板是从你的网站自动生成的（在你的CSS中）MaterialDesign：这个面板可以自动生成MaterialDesign面板中的颜色7.多个光标移动光标按住CMD+单击以添加多个光标，您也可以使用CMD+U撤消您选择的最后一个光标。8.复制图像的数据URI◆选择“网络”面板◆在“资源”面板中选择你的图像◆右键单击图像并选择“复制图像作为数据URI”选项9.触发伪类◆在左侧面板元素鼠标右键选择“强制元素状态”◆另外在右侧面板选择切换伪类状态的图标10.拖拽选择多列◆选择“Sources”面板◆在“Sources”面板编辑器中选择你需要的文件◆按住Alt并拖动鼠标#p#11。使用$0获取当前元素◆选择“元素”面板◆在“元素”面板中选择DOM元素◆点击“控制台”输入$0获取当前元素12、显示并选择元素中的一个DOM节点：◆在“Console”面板中右击◆选择“RevealinElementsPanel”13.查看事件监听器◆选择“Elements”面板◆在“EventListeners”菜单中选择一个事件◆右击选择“ShowFunction”14.预览缓动◆点击缓动图标（紫色图标），可以预览缓动◆可以浏览选择其他缓动或自定义缓动15.媒体查询◆点击手机图标左上角，选择设备模式◆点击断点（“蓝色”，“绿色”，“橙色”）NetworkFilmstripFilmStrip”显示了从开始到结束呈现的页面的屏幕截图。您可以单击屏幕截图并以时间线样式查看视图。◆选择“网络”面板◆点击“记录”图标◆重新加载页面17.复制响应您可以复制网络资源中的“响应/请求”标题。◆选择“Network”面板◆在“Sources”面板编辑器中选择你需要的文件◆右击选择“CopyResponse”18.运行预定义的代码片段◆在左侧边栏中选择：Sources>Snippets◆右键点击选择SelectNew◆输入文件名，在右侧面板输入代码片段◆右键点击代码片段文件名，选择Run19.DeviceEmulationSensors可以模拟移动设备传感器：◆触摸屏◆地理位置坐标◆加速度计您可以这样做：◆选择“Elements”面板◆选择“Emulation>Sensors”并单击“Esc”取消20.Workspaces◆选择“Sources”面板◆在Sources面板中右击并选择“AddFolder到工作区”◆选择你的文件并右键单击，然后选择映射到网络资源◆修改你的文件代码并查看扩展名以阅读◆ChromeDevTools◆开发提示
