怎样使用chrome调试前端html和css

按F12进入控制台模式 或者选中内容 右键 审查元素

ELements html css调试 选中html标签右边就是css

右键标签Edit as HTML 为修改当前标签html代码 Edit as Text 是修改text内容

css去掉钩子 就能失效了 右上角加号添加新选择器元素后面点击添加新元素

还有一些常用的

sources 来源文件 CSS JavaScript之类文件调试debug

Network 页面请求 get post之类 一般用来抓包的

Application 存websql Local Storage cookies增删改查的地方

console 就是控制台了 可以输入JavaScript代码 或者console函数输出的地方

工具：谷歌浏览器

步骤

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

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

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

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

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

---