【零基礎】簡易JavaScript！學寫港鐵到站時間網頁 #2-Chrome開發者工具
「開發者工具」可以幫助我們除錯，不但可以調整畫面UI 佈局，也可以直接看到跟伺服器溝通情況。各個瀏覽器也有「開發者工具」，包括 Firefox、Safari、Opera、Edge等，功能大同小異。
最常用到3個功能：
（1）Elements 元件 — 直接更改HTML 及CSS ，預視效果。
（2）Console 控制台 — 顯示JavaScript 程式碼的運算結果。
（3）Network 網絡 — 顯示組成網頁的文件和與伺服器溝通過程。
開啟方法：
只要在網頁的空白位置，按下右鍵，然後選取「Inspect（檢查)」就能打開「開發者工具」。
Elements 元件 — 修改HTML
這部份是網頁的原始碼（圖1 橙框），最外邊是<html> </html>，中間包含<head></head>及<body></body>。
旁邊三角形按下後「打開」或「隱藏」HTML。
開發者工具其中一個特色，是可以讓你即時更改HTML 和CSS，即時看修改後的效果。在head 的部份有一個<title>New Tab</title>（圖1 藍箭嘴），負責控制頁頂的標題。
用滑鼠在”New Tab”點擊兩下，然後輸入文字，就會看到頁頂標頂一起更改。
只要按F5 刷新頁面，就會變回原來模樣。
Elements 元件 — 選取物件及修改CSS
Elements 左邊有兩個按鍵（圖2），第一個是箭嘴符號。
按下後再把滑鼠移到頁面上，會自動選取頁面上的HTML TAG及其CSS。CSS 顯示在原始碼下方，也可以即時修改。
動動手（嘗試跟着上圖一起加插CSS吧～！）：
(1) 點擊箭嘴符號
(2) 選取上方Gmail 文字
(3) 下方CSS 位置用滑鼠雙擊
(4) 輸入 color:red;
(5) 頁面上的Gmail 變成紅色
Elements 元件 — 手機平板預覽
Elements 左邊另一個是手機圖案（圖2），按下後會進入「響應式網頁(Responsive Web)」模式，讓你模擬從手機或是平板電腦瀏覽。
我們在開發時，不時要考慮字型大小、圖片及佈局，在不同裝置的情況。此功能可以選擇不同裝置（下圖藍圈）或方向（下圖紅圈），離開的話按多一次手機圖案就可以。
Console 控制台
這裏會跟JavaScript 檔案連繫，JavaScript 有東西要顯示，就在這裹。往後連接數據庫後，取回來的資料，我們也會再這裏檢查。
另外這個位置也能進行一些運算，所以不要胡亂輸入東西。
Network 網絡
打開這個頁面，再重新載入(F5)網頁，你會發現Google給了很多檔案才能組成這版，例如檔名roboto.css 的CSS檔， 描述Google首頁所用的字型。也有一些.js 和圖片檔等。
至於中間有一列分類列（上圖紅圈）可以按下，單獨看CSS或圖片也可以。
作者的話 (可以略過)「我要控制科技，而不是被科技控制我！」感謝您看我的文章。
我原本是一個新聞記者，但年近30，開始感到迷惘。
於是報讀了Coding Bootcamp，3個多月成功轉職「軟件工程師」。很多朋友問我到底難不難？
我嘗試運用記者經驗，將問題深入淺出，簡短地讓沒有經驗的你，感受一下Programming適不適合自己。另一個目的，我希望累積教學經驗。
日後有手足要幫忙，我可以幫到。
即使沒有財力開公司請人，也希望授之以漁。
所以有問題請留言，我也希望知道自己哪裏講得不夠好。▲▲香港 時代▲▲