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