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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了怎样使用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函数输出的地方
参考技术A 哦 按下F12打开控制台,点击element选项卡,可以看到页面的每个dom节点和对应样式
可以对其进行修改

以上是关于怎样使用chrome调试前端html和css的主要内容,如果未能解决你的问题,请参考以下文章

前端chrome调试

前端调试效率低?试试这10个“Chrome开发者工具”使用技巧

web前端开发自学路线是怎样的?html+css+JavaScript的学习方法?

前端技术-调试工具(上)

前端开发必备调试技巧

前端学习路线