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