如何使用chrome浏览器调试页面

Posted 2023-04-28

工具：谷歌浏览器

步骤

打开开发者工具，可以直接在页面上点击右键，然后选择审查元素或者在Chrome的工具中找到或者直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。



打开的开发者工具就长下面的样子，建议将开发者工具弹出作为一个独立的窗口。



这个就是查看、编辑页面上的元素，包括html和CSS：



左侧就是对页面HTML结构的查看与编辑，可以直接在某个元素上双击修改元素的属性，或者点右键选;Edit as Html;直接对元素的HTML进行编辑，或者删除某个元素，所有的修改都会即时在页面上得到呈现。



Elements标签页的右侧可以对元素的CSS进行查看与编辑修改：

参考技术A 可以通过以下方法解决问题： 1、使用Dreamweaver编写的网站代码可以设置在谷歌浏览器里面进行预览。

如何更专业的使用Chrome开发者工具

参考技术A 顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情： ◆调试界面的问题 ◆使用断点调试JavaScript代码 ◆优化你的代码 打开开发者工具，你只需要在页面的任意位置右击鼠标，选择检查元素或从右上角菜单中选择“工具>更多工具>开发者工具“。 下面示例演示的都是在Google Chrome的Canary浏览器下做的演示。 1.快速编辑HTML元素 试一试： ◆选择"Elements"面板 ◆选择"Elements"面板内的一个DOM元素 ◆双击你需要打开的DOM元素标签，你就可以编辑它 当你完成之后会自动更新和关闭标签 2.到指定的行数 你可以在“Sources”面板中选择指定的文件中使用“:行数:列数”的功能。试试快捷键CMD + O。 3.展开所有子节点 试一试： ◆选择"Elements"面板 ◆选择DOM元素和在带有剪头的地点按住Alt +点击鼠标左键，可以展开所有子节点 4.改变开发者工具位置 试一试快捷键：CMD + Shift + D。设置开发者工具有三个选项： ◆不在窗口中显示开发者工具 ◆在窗口右侧显示开发者工具 ◆在窗口底部显示开发者工具 5.通过CSS选择器搜索DOM元素 试一试快捷键：CMD + F / CTRL + F和输入你需要的类名或ID名，可以搜索到相应的选择器。 6.Material和自定义颜色调色板 你可以点击颜色代码前面的小图标，你可以选择： ◆页面颜色：这个面板是从你的Web网站（在你的CSS中）自动生成 ◆Material Design:这个面板可以从Material Design面板中自动生成颜色 7.多个光标 移动光标按住CMD + 点击可以添加多个光标，你也可以使用CMD + U撤销你选择的最后一个光标。 8.复制图片的Data URI ◆选择"Network"面板 ◆在“Resources”面板选择你的图片 ◆在图片上右击，选择“Copy Image as Data URI”选项 9.触发伪类 ◆在左边的面板元素上右击鼠标，并选择“Force Element State” ◆另外在右边的面板中选择切换伪类状态的图标 10.通过拖拽选择多列 ◆选择“Sources”面板 ◆在“Sources”面板编辑器中选择你需要的文件 ◆按住Alt并拖动鼠标