喜歡從業(yè)的專注可霎，七分學習的態(tài)度水援。
360瀏覽器-開發(fā)工具
谷歌-開發(fā)工具
IE-開發(fā)工具
Web開發(fā)中最最煩瑣的莫過于調(diào)整CSS和JS不铆，而最方便最高效的方式就是利用瀏覽器的開發(fā)工具調(diào)整。CSS可以實時調(diào)整展現(xiàn)裹唆，JS可以斷點、監(jiān)控只洒。那么這個最最方便的工具怎么打開许帐，統(tǒng)一按下鍵盤F12.
不同瀏覽器不同版本對應開發(fā)工具也不一樣，但基本原理都一致毕谴。最常用的有這些功能：移動設備成畦、Elements、Source涝开、Network循帐、
常用
移動設備##
移動設備是指將Web頁面從PC展示切換到手機模式，用于模擬手機上調(diào)試Web界面舀武。手機模式能夠適配手機大小并配備一些常用手機型號拄养，方便快捷實現(xiàn)各類手機的屏幕適配。
手機模式
Elements##
Elements 是指Web界面的元素银舱，是調(diào)試CSS的關鍵瘪匿。Elements界面包括元素區(qū)域、CSS區(qū)域寻馏、邊界區(qū)域棋弥。
Elements
技巧1-捕捉元素
- 點擊元素區(qū)域的元素，CSS區(qū)域顯示選中元素的所有css屬性诚欠，邊界區(qū)域會顯示選中元素的大小顽染、邊框漾岳、margin\padding值。
- 使用捕獲工具粉寞，直接到界面上點擊元素尼荆，元素區(qū)域會直接顯示選中元素，CSS區(qū)域顯示選中元素的所有css屬性仁锯，邊界區(qū)域會顯示選中元素的大小耀找、邊框飞蚓、margin\padding值复唤。
捕獲工具
技巧2-修改元素
- 在元素區(qū)域修改当叭，雙擊元素彈出修改饲梭，可修改內(nèi)容枉疼，屬性蹭越。如給2017-5-5按鈕增加淺色邊框：雙擊style,寫入：border:1px solid #fce7e5;
修改后
修改完成后火欧，在CSS區(qū)域會同步展示增加的CSS樣式衷畦。
-
在CSS區(qū)域修改妇斤。
括號最下面單機可新增CSS項摇锋，括號左側復選框可以取消和生效CSS;
新增CSS項
雙擊CSS值，可以修改值;
修改值
- 在邊界區(qū)域修改站超。
邊界區(qū)域可以修改元素大小和margin荸恕、padding值，修改后在界面實時展示修改后的效果死相。
NetWork##
待續(xù).
開發(fā)工具調(diào)試修改是方便對元素的實時修改展示融求，對于源文件的修改需要調(diào)試完成后將調(diào)試修改的內(nèi)容到源文件中修改才能最終完成修改。
<small>工具越來越方便算撮，開發(fā)越來越高效生宛。</small>
