附錄

什麼是 Glitch？

為了完成包含在這些課程中的程式碼範例，我們將使用 Glitch。Glitch 是一個線上程式碼編輯器，讓您建立和檢視網站和伺服器 API，無需在您的電腦上安裝任何東西。

Glitch 程式碼編輯器環境看起來像這樣

上面的紅色方框是線上編輯器，您將在其中輸入 HTML 和 CSS。綠色方框標示的是按鈕，它會帶您前往您正在建立的頁面的即時版本。黃色方框是讓您建立專案副本的按鈕。藍色方框表示您可用的檔案。在 assets 資料夾中，您可以找到您的圖片。

在這些課程中，您將需要各種圖片才能完成練習。您完成這些課程所需的所有圖片都已新增至 Glitch 專案中。若要檢視專案中的圖片，請點擊檔案列表中的 assets 項目，在 Glitch 編輯器的左側。若要取得任何單一圖片的連結，請從右側的 assets 列表中選取圖片，然後點擊 URL 旁邊的「複製」按鈕，在出現的彈出視窗中。您可以在任何需要圖片的地方使用該連結。

開啟此專案。點擊右上角的「Remix This」按鈕。這會建立一個您可以編輯的新專案。您可以繼續使用相同的編輯器，用於本次和未來的訓練。未來的每個教學課程都會讓您有機會開始，使用截至該點的解決方案的參考版本。

不一定要使用 Glitch 才能完成這些訓練。但是，完成練習所需的一些程式碼並未在這些課程中討論，但包含在 Glitch 範例中。如果您想使用其他編輯器，您可能仍然需要進入 Glitch 範例，將 CSS 和伺服器程式碼複製到您的本機解決方案中。

檢視伺服器回應

我們知道我們可以透過存取伺服器傳回的 JSON 物件的屬性來呈現伺服器回應。但是，您實際上要如何檢查這些屬性是什麼呢？

如果您需要檢查伺服器回應，您可以使用瀏覽器中的開發人員工具來執行此操作。如果您開啟 Chrome DevTools 並前往「Network」分頁，您會在其中找到您的請求。它是「submit-form」請求。如果您點擊它，您可以看到所有相關資訊。