一、开发者工具的用途
作为一个Web开发人员，日常中与我们开发相关的，就是各大浏览器的开发者工具。多了解一些chrome开发者工具调试技巧/功能对于平时开发很与帮助， 在实际项目中多使用这些功能，提升自己的工作效率，今天就是要简要说说开发者工具中一些有关CSS的部分。
二、开发者工具面板功能介绍
打开一个自己编写的网页，使用快捷键F12或者右键页面选择“检查”来打开浏览器开发者工具的面板，面板功能如下图：
1，Element标签
1）根据标签页的html内容找到对应元素
2）根据页面元素找到标签页的html
3）在标签页右侧查看style属性/CSS属性
4）查找
2，控制台（Console）
控制台非常有用， 当我们对于javascript提供的API或者API的功能不是非常熟悉。 这个时候命令行就 成为我们试验最好的地方。 如，我们想查看document下面有哪些函数，我们就可以在命令行中输入，然后选中并尝试。 对于jquery等开源框架的学 习，这种方式也非常高效，学代码还是得跑起来才行，嗯，有点偏题了。。。控制台对于前端CSS初学者基本上是没有任何用处，所以这次就不在这里进行探究了，如果有空这几天会专门写一篇有关控制台（Console）的使用方法的文章。
3，来源(Sourcer)
主要用于查看文件的来源，检查自己引用的文件是否引用成功。
1）快速查找Ctrl+P（模糊搜索）
打开控制台使用快捷键Ctrl+P进行搜索，类似浏览器的索引功能。
2）在某个文件中查找Ctrl+f
选中文件，然后使用快捷键Ctrl+f，进行搜索文件内容。
3）在全部文件中查找某個字段，Ctrl+shift+f
4）快速调到指定行Ctrl+g
用於文件中查看某一行代碼，如下图"：34"跳转到第34行。
5）代码出错定位，在IDE中有些错误是检查不出来的（特别是跟浏览器有关的部分）但是在Sources中打开HTML文件就可以看到这些错误。
三、总结
CSS前端使用开发者工具，Elements、Sources这两个功能学会使用，基本上对一个页面仔来说完全够用了，其余的一些功能基本上都是一些和JavaScript有关的知识。
网友评论