后端开发者开发前端必会的工具（一）：样式调试篇
又來為大家分享干貨了，今天主要是分享一點關于后端工程師開發前端比較苦惱的一個問題《如何去調試前端？》，我相信這是所有后端開發者比較困惑的，如果有這個困惑的，記得關注“程序員曉曉”公眾號，并給我留言，我看有多少人有這方面困惑的。
而作為擁有8年前端開發經驗的我，外加后端技術的傍身，必須把這個技能分享給想要開發前端，但又被前端調試困惑的小伙伴。
首先，要想成為一個前端開發工程師，必須有一個好的前端開發工具，比如HbuilderX（個人比較喜歡用）、VSCode（使用的時候需要自行安裝各種插件，如果習慣用微軟東西的，可以使用），當然前端開發工具非常多，可謂是各有千秋，有付費的也有免費的，有國內的也有國外的，而HbuilderX屬于國內免費的較為好用的前端開發工具，當然如果你是一個絕世高手，你也可以使用記事本開發前端。可能還有人會問，為什么不用Dreamweaver呢？這個東西主要是給有為青年用來練手的，不適合我們工作中使用。
其次，你還需要有一個好的調試工具作為輔助，因為前端開發工具一般會通過高亮、補全、以及關鍵字顏色的顯示告訴你一些常規的是否正確，但是有一些問題，它是沒法幫你排查的，此時我們必須有一款比較好的調試工具，才能幫你解決這個困惑，而谷歌瀏覽器就能很好的給你前端調試帶來幫助，是不是開始疑惑，谷歌瀏覽器幫助我進行調試，有沒有搞錯。不管有沒有搞錯，可以先嘗試使用，如果不好使，你再來找我切磋。除了谷歌，其實各大瀏覽器都是可以進行調試的，但是相對這些瀏覽器，谷歌瀏覽器是比較好使的，它的開發工具也比較不錯。
那么下面我們就一起來看看這個被你質疑存在的家伙吧！
打開我們的前端開發工具HbuilderX，如下所示，記得不要忘記添加一個簡單的代碼程序，下面我就用一個簡單示例為大家演示谷歌瀏覽器中開發人員工具的使用。
HbuilderX開發工具和前端的HTML代碼
此時我們給當前頁面中的html元素添加一點樣式代碼，如下所示：
以上代碼，將其放到header標簽里邊，最后呈現的效果如下所示：
呈現效果
那么如何利用谷歌瀏覽器進行查看它的結構和樣式呢？如下圖所示：
Elements面板的呈現
如果要查看剛剛所寫的元素的結構，可以通過如下方式進行查看：
如果碰到樣式沒有效果，就可以按照上面的結構進行查。當碰到樣式沒有被使用，存在的可能性有被層疊或者是選擇器的權重不夠，第一種情況很容易查看，但是第二種情況就得靠你自己去判斷，針對第一種情況會顯示為如下：
從圖片上，可以看出.father中的高度被柵格線劃掉，而div中的寬也被柵格線劃掉。
第一種：權重相同的情況下，存在的可能就是被層疊掉，這兒的.father中的高度被.other中的高度層疊掉，也就是覆蓋掉的意思。誰離元素近，誰就會被使用，而遠的就被層疊掉，所謂的就近原則。
第二種：樣式代碼相同，而權重不同，權重小的會被權重大的層疊掉，比如div的權重沒有.father的權重大，所以被.father中的寬度層疊掉了div中的寬度。
如何判斷權重的大小，這兒給大家一個最直接簡單的方法，就是選擇器選擇的時候越精準，范圍越小，權重就越大，如果不清楚，可以給我留言。
最后補充一點，當碰到開發的時候發現標簽元素少元素時，也可以通過這種方式進行查看。關于谷歌瀏覽器開發人員工具調試JavaScript代碼等待下次分享。
大家持續關注，會隨時帶來新的技術內容分享。
總結
以上是生活随笔為你收集整理的后端开发者开发前端必会的工具（一）：样式调试篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 技术分享 | 【构建服务端SDK】之连接
- 下一篇： 技术分享｜前端性能 关键性能指标以及测量