工欲善其事，必先利其器(一)

　　今天我胡汉三怀着很悲疼的心情在这写文章，为啥呢，我写好的草稿居然没了？？？心痛到没法肤吸，但是我能怎么办，随笔仍是要写的呀。

　　相信你们在工做中有一半的时间都是在疯狂的怼F12，从今天开始呢，咱们就一步步的把他解析出来，看看还有哪些咱们不经常使用的功能，废话很少说，开整，此篇适合刚刚入门的新手看，大佬就不要浪费时间咯.

　　

　　入场篇

　　　 打开调试器：

　　　　　　　　1.快捷键：　　F12   或者  ctrl+shift+i

　　　　　　　　2.浏览器右键点击页面空白处，选择审查

　　  　　　　　　

 

 　　初识篇

　　　　打开后：

         

　　　　来，让咱们来总览一下他的一些小的功能点，大的功能点将会在后续进行记录

　　　　小箭头：

　　　　

 

 　　　　　此乃点点点点读机，想看哪里点哪里，选择小箭头Icon并移到页面元素后，则会出现长宽，点击后则会在Elements里高亮所选中的元素，例：

 　　　　

 

 　　　　小手机：

　　　　　　点击后则会出现以下界面， 能够用来调试移动端的页面

　　　　

 

 　　　　Elements：

　　　　元素调试，右侧会显示页面的DOM结构，左侧则会显示元素的CSS样式

　　　　

　　　

　　　　Console：

　　　　控制台，打印报错数据，也可直接在里面作一些运算

　　　　

 

 　　　　Sources:

　　　　来源，可在此看到打开的文件及代码，也能够在这里进行代码断点调试

　　　　

 

 　　　　Network:

　　　　网络请求，请求之类的都在此页面

　　　　

 

 　　　　Performance:

　　　　性能，能够用来分析页面的性能

　　　　 

 

 　　　　Memory：

　　　　存储，能够用来看一下对象和节点以及对内存进行分析

　　　　

 

 　　　　application:

　　　　应用， storage，cookies等皆在此处，记录网站加载的全部资源信息，包括存储数据

　　　　

 

 　　　　Audits：

　　　　审查，能够在此跑跑分，看看页面有什么须要优化的地方

　　　　

 

　　　　Security: 

　　　　能够在此调试当前网页的安全和认证等问题并确保在你的网站上正确地实现HTTPS

　　　　

 

 此篇为基础篇就先简单介绍一下，后续会参照chrome的官方文档对每个功能点进行详细的操做说明，愈来愈以为利用好调试器会让咱们开发以及debug的效率获得有效的提高！！就一句话，工欲善其事，必先利其器！！