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

寫網頁都要懂得看F12

首先到我們做的index.html然後按下F12，就換看到這個：

我這邊是用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就能在這邊看到運行了什麼。
   
5. Sources，可以看到整個資料夾的東西，我們可以在這看到之前寫的style.css
   
6. Network，看起來沒啥，但其實這非常重要，可以看出網頁前端+後端的問題，我們只要按個F5就會跑出東西
   
   要按F5重新整理，就會出現東西了
   

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