Web开发标配--开发人员工具-F12

喜欢从业的专注，七分学习的态度。

360浏览器-开发工具
谷歌-开发工具 IE-开发工具

Web开发中最最烦琐的莫过于调整CSS和JS，而最方便最高效的方式就是利用浏览器的开发工具调整。CSS可以实时调整展现，JS可以断点、监控。那么这个最最方便的工具怎么打开，统一按下键盘F12.

不同浏览器不同版本对应开发工具也不一样，但基本原理都一致。最常用的有这些功能：移动设备、Elements、Source、Network、

常用

移动设备##

移动设备是指将Web页面从PC展示切换到手机模式，用于模拟手机上调试Web界面。手机模式能够适配手机大小并配备一些常用手机型号，方便快捷实现各类手机的屏幕适配。

手机模式

Elements##

Elements 是指Web界面的元素，是调试CSS的关键。Elements界面包括元素区域、CSS区域、边界区域。

Elements

技巧1-捕捉元素

• 点击元素区域的元素，CSS区域显示选中元素的所有css属性，边界区域会显示选中元素的大小、边框、margin\padding值。
• 使用捕获工具，直接到界面上点击元素，元素区域会直接显示选中元素，CSS区域显示选中元素的所有css属性，边界区域会显示选中元素的大小、边框、margin\padding值。

捕获工具

技巧2-修改元素

• 在元素区域修改，双击元素弹出修改，可修改内容，属性。如给2017-5-5按钮增加浅色边框：双击style,写入：border:1px solid #fce7e5;

修改后

修改完成后，在CSS区域会同步展示增加的CSS样式。

• 在CSS区域修改。
  括号最下面单机可新增CSS项，括号左侧复选框可以取消和生效CSS;

  
  新增CSS项
  

  双击CSS值，可以修改值;

修改值

• 在边界区域修改。
  边界区域可以修改元素大小和margin、padding值，修改后在界面实时展示修改后的效果。

NetWork##

待续.

开发工具调试修改是方便对元素的实时修改展示，对于源文件的修改需要调试完成后将调试修改的内容到源文件中修改才能最终完成修改。

<small>工具越来越方便，开发越来越高效。</small>