iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
自我挑戰組

我要成為全端王!系列 第 17

全端入門Day17_前端程式撰寫之F12

昨天介紹了CSS,今天就來介紹大家F12的功能,

寫網頁都要懂得看F12

首先到我們做的index.html然後按下F12,就換看到這個:
https://ithelp.ithome.com.tw/upload/images/20210902/20140126qoa19qbN0C.jpg
我這邊是用google的Chrome瀏覽器,當然你也可以用微軟的Edge或是firefox瀏覽器或其他都行,但我主要是用Chrome。
那麼寫網頁為什麼要懂F12呢? 是因為它可以幫你找出Bug,在前端網頁的部分要找出Bug基本上比較難一點,因為HTML本身不是很嚴謹的程式語言,所以有時候少了個東西,程式還能夠繼續運行,但如果這個問題不把它補起來,未來越來越多行程式碼的時候就會很麻煩。
我這邊介紹幾個常用的:

  1. 找單一問題的,ctrl+shift+c,最上面那排的第一個,可以用來找出標籤的有沒有運作,可以一一的看每個標籤有沒有正常運作。
  2. 有個大小的,ctrl+shift+m,是用來切換手機網頁跟電腦網頁的,因為我們在寫網頁的時候,習慣適用電腦的解析度去看,但如果放到手機的畫,因為解析度不同會造成手機業面太過於滿,還要往右滑,正常的手機網頁應該是只能上下滑,這個可以用RWD改善。
  3. Elements,這可以看到當前的HTML有寫了什麼東西。
  4. Console,可以用來及時運算,像輸入2+5就會回應7,之後的JavaScript會有Console.log就能在這邊看到運行了什麼。
    https://ithelp.ithome.com.tw/upload/images/20210902/20140126OndZ6QoXGG.jpg
  5. Sources,可以看到整個資料夾的東西,我們可以在這看到之前寫的style.css
    https://ithelp.ithome.com.tw/upload/images/20210902/20140126Q0lHxviqpY.jpg
  6. Network,看起來沒啥,但其實這非常重要,可以看出網頁前端+後端的問題,我們只要按個F5就會跑出東西
    https://ithelp.ithome.com.tw/upload/images/20210902/20140126HL9vtDvTKp.jpg
    要按F5重新整理,就會出現東西了
    https://ithelp.ithome.com.tw/upload/images/20210902/20140126knmOmcjv3F.jpg

之後介紹到JavaScript還會在說明F12的內容,今天就介紹到這,明天會是CSS的最後一篇。


上一篇
全端入門Day16_前端程式撰寫之多一點的CSS
下一篇
全端入門Day18_前端程式撰寫之CSS終
系列文
我要成為全端王!30

尚未有邦友留言

立即登入留言