一.调试工具

我是以百度页面为例
Chrome浏览器调试总结
箭头按钮:用于在页面选择一个元素来审查和查看它的相关信息,当我们在Elements这个按钮页面下点击某个Dom元素时,箭头按钮会变成选择状态

设备图标:点击它可以切换到不同的终端进行开发模式,移动端和pc端的一个切换,可以选择不同的移动终端设备,同时可以选择不同的尺寸比例。

Chrome浏览器调试总结
Element内容:用来查看,修改页面上的元素,包括DOM标签,以及css样式的查看,修改,还有相关盒模型的图形信息。
Chrome浏览器调试总结

盒模型:
Chrome浏览器调试总结
二.控制台打印

用于打印和输出相关的命令信息
Chrome浏览器调试总结
三. Sources:

js资源页面:这个页面内我们可以找到浏览器页面中的js 源文件,方便我们查看和调试
Chrome浏览器调试总结
可读模式:
Chrome浏览器调试总结

相关文章: