css 浏览器调试中不可见_前端入门必会的初级调试技巧
本文僅僅針對(duì)前端初學(xué)者，目的是【用20%不到的時(shí)間】 學(xué)會(huì)【前端最常用的部分調(diào)試技巧】，如果需要最詳細(xì)的調(diào)試技巧，包括調(diào)試性能優(yōu)化的相關(guān)知識(shí)，文末會(huì)補(bǔ)充最全的文檔（chrome devtool的官方文檔鏈接）
初學(xué)一門編程語言，大家一般都會(huì)找相關(guān)的教程看，好不容易找到一個(gè)不錯(cuò)的教程，興沖沖的打開電腦，自信的敲（chao）下了幾行代碼，完美，點(diǎn)擊運(yùn)行
woc！！！
我明明照著教程寫的，為啥就是不一樣！！
為啥老報(bào)錯(cuò)啊啊啊！！！！！
于是點(diǎn)擊教程回看，逐行的對(duì)代碼，一遍遍的對(duì)下來，發(fā)現(xiàn)了一些小問題，趕緊改改，點(diǎn)擊運(yùn)行
為啥還是不一樣啊啊啊啊啊啊啊啊！！！
自學(xué)的時(shí)候又沒得人問，只能找百度，但是關(guān)鍵詞都不知道怎么搜合適，搜出來一大堆廣告和不相關(guān)的東西，從一開始的信誓旦旦到心態(tài)爆炸，然后逐漸……
好吧好吧，其實(shí)是你忘了學(xué)一樣?xùn)|西，只要是學(xué)編程，只要你開始寫代碼的時(shí)候，就要開始逐漸了解它的調(diào)試技巧
前端還有點(diǎn)不太一樣，前端牽扯到多門語言，所以需要在每個(gè)階段學(xué)習(xí)一些新的調(diào)試技巧，防止找不到問題心態(tài)爆炸
1、HTMl + CSS階段
html代碼的單獨(dú)調(diào)試就不說了，這倆一般都是一起出現(xiàn)
在這個(gè)階段，你需要學(xué)會(huì)的是
首先，使用cmd（ctrl） + alt + i 打開chrome devtool
你會(huì)彈出這么一個(gè)頁面
chrome 調(diào)試工具這個(gè)界面就是我們需要主要學(xué)習(xí)的東西了
在html，css階段，我們要學(xué)會(huì)的是element這個(gè)tab，也就是這里
在學(xué)習(xí)html，css的時(shí)候，最容易遇到的問題就是
為什么寫的樣式和我預(yù)想的不一樣？
這時(shí)應(yīng)該這樣調(diào)試
1.找到樣式不一樣的地方，用chrome調(diào)試工具選擇節(jié)點(diǎn)
2.這時(shí)我們就可以在調(diào)試工具里看到節(jié)點(diǎn)相關(guān)的所有css屬性了
如果覺得不一樣，或者需要修改的地方，直接雙擊編輯就好了，修改的地方會(huì)實(shí)時(shí)顯示在頁面里
當(dāng)然，刷新就會(huì)重新讀取代碼，你臨時(shí)修改的這些東西就沒了，千萬不要以為在這就是直接寫代碼就可以了！！！
及時(shí)嘗試，及時(shí)修改代碼！！！不然唰唰唰寫一堆，刷新就沒了不是心態(tài)崩盤？？
2.JS部分
這個(gè)部分應(yīng)該有編程基礎(chǔ)的人都會(huì)很熟悉了，就是普通編程語言的調(diào)試操作，但是不一樣的是
只要有瀏覽器，你就能進(jìn)行js編程和調(diào)試，完全不用裝任何其他軟件和環(huán)境
首先打開控制臺(tái)，打開console的tab
比如咱來敲個(gè) 1+1？
當(dāng)然，知道這些可是不能調(diào)試的，這些東西就是介紹，有這么個(gè)玩意兒，正餐在后面呢
1.最簡單但是效果一般的調(diào)試
其實(shí)這個(gè)方法也算不上調(diào)試，你可以在代碼里使用console.log打印函數(shù)，這樣控制臺(tái)就會(huì)打印出你打印的信息
比如下面這個(gè)html 文件
<html><script>let a = 1console.log(a)a = a + 1console.log(a)</script> </html>在瀏覽器運(yùn)行，控制臺(tái)就會(huì)打印以下信息
是不方便多了？
如果嫌麻煩的話，可以用這種方法調(diào)試，檢驗(yàn)關(guān)鍵的邏輯里，各種數(shù)據(jù)對(duì)不對(duì)
但是但是但是！！！！！
這種辦法效率比較低，并且，很多復(fù)雜bug很難找到，并不是真正的的調(diào)試
？？？說了這么多擱這兒說廢話呢？？
并不哈哈哈哈哈，這種方法最簡單，下面的方法就需要稍微學(xué)習(xí)下了，對(duì)完全0基礎(chǔ)的人有一些的理解成本
2.最有效的調(diào)試方法--斷點(diǎn)調(diào)試
還是上面那個(gè)例子，我們做些修改
<html><script>let a = 1debuggera = a + 1console.log(a)</script> </html>debugger就是斷點(diǎn)的意思
用打開這個(gè)簡單的文件，然后打開控制臺(tái)，刷新頁面
會(huì)發(fā)現(xiàn)程序停在斷點(diǎn)的位置，就像這樣
這時(shí)就可以看到觸發(fā)斷點(diǎn)時(shí)各個(gè)變量的值
當(dāng)然，我們也可以讓斷點(diǎn)運(yùn)行，讓程序單步運(yùn)行等等，來看看右邊的工具欄
工具欄從左往右依次是上面這些
然后每次，只要程序的運(yùn)行和你的想法不一致的時(shí)候
不要再肉眼看代碼錯(cuò)誤了！！！你是沒得鋼鐵鈦合金鐳射眼的！！
學(xué)會(huì)調(diào)試！！！
谷歌瀏覽器調(diào)試工具官方文檔：https://developers.google.com/web/tools/chrome-devtools
如果打不開的可能就需要其他渠道看文檔了=。=
之后看情況補(bǔ)充針對(duì)初學(xué)者的網(wǎng)絡(luò)，緩沖，性能優(yōu)化相關(guān)的入門調(diào)試技巧，至于看什么情況，贊一個(gè)唄
總結(jié)
以上是生活随笔為你收集整理的css 浏览器调试中不可见_前端入门必会的初级调试技巧的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果电脑如何做xp(苹果电脑如何做相册)
- 下一篇： 2017年html5行业报告,云适配发布