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

html-css029

怎样使用chrome调试前端html和css,第1张

按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函数输出的地方

步骤：

1. 为Chrome安装Web Developer扩展。

2. 打开该扩展，选择CSS选项卡下的Disable All Styles禁用所有CSS，选择Disable Browser Default Styles禁用浏览器默认提供的CSS。