從零開始建立網站可能是一項艱鉅的任務，具體取決於專案的複雜程度。這項技能可能需要數月甚至數年才能掌握。因此，大多數專業程式設計師都開發了一些流程和捷徑來提升他們的技能和進步。
這包括維護一個最常見和最常用程式碼的便捷清單。在本文中，您將學習另一個技巧，讓您能夠使用 Chrome、Firefox 和 Edge 等熱門瀏覽器負責任地複製網站原始碼。它可以成為寶貴的教育資源，提供完整的程式碼範例以激發靈感。快來看看。 對開發人員最有用的線上社區.
快速連結
如何使用 Chrome 從網站複製程式碼
您可以使用 Chrome 上的以下方法從網站複製您喜歡的任何程式碼。
使用頁面來源
無論使用哪種瀏覽器，這或許都是訪問網站或網頁完整程式碼庫的最佳且最簡單的方法。要在 Chrome 中查看頁面原始碼，請前往目標網站，然後右鍵單擊頁面上除連結、圖片或廣告以外的任何部分。
點擊 查看頁面原始碼 或直接點擊 Ctrl + U. （Windows、Linux）或 命令 + U （macOS）。複製所需的部分或全部程式碼並將其貼上到您喜歡的程式碼編輯器中。
使用 F12 快捷鍵
您可以透過造訪任何網站並點擊即可輕鬆存取 Chrome 開發者工具 F12Chrome 開發者工具包含網站的程式碼，並可作為開發人員的除錯工具。
選擇您想要的所有程式碼，然後將其複製並貼上到您選擇的程式碼編輯器中。
使用掃描工具
另一種存取 Chrome 開發者工具面板的方式是透過檢查器。為此，請造訪要從中複製程式碼的目標網站。現在，點擊 Ctrl + Shift + I （Windows、Linux）或 命令 + 選項 + I （macOS）這將直接帶您進入開發工具。
或者，右鍵單擊頁面的任何空白部分並選擇 頁 從選單選項中，在「檢視頁面原始碼」選項下方，選中 如何使用 Chrome DevTools 解決網站問題.
透過 Chrome 中的「更多操作」選單
透過 Chrome 開發者工具探索網站程式碼的另一種方法是點擊目標網站右上角的「更多」按鈕。從選單選項中選擇 更多工具 ， 然後 開發者工具.
複製所有程式碼，然後將其貼上到您選擇的任何程式碼編輯器中。除了用作調試工具外，您還可以使用 Chrome 開發者工具截取螢幕截圖。來體驗吧！ Chrome 開發者工具：像專業人士一樣使用它的實用技巧.
如何使用 Firefox 複製網站程式碼
以下是使用 Firefox 複製網站原始碼的不同方法。
顯示頁面原始碼
要在 Firefox 中透過查看頁面原始碼來存取和複製網站程式碼，只需右鍵單擊目標網站，然後按一下 查看頁面原始碼.
而是輕點 Ctrl + U. （Windows、Linux）或 命令 + U （macOS）。複製所有需要的程式碼並將其貼上到您選擇的程式碼編輯器中。
您可以點選選單按鈕，選擇 更多工具 ，然後點擊 頁面原始碼.
使用 F12 快捷鍵
與 Chrome 一樣，您只需按下 鍵即可在 Firefox 的 Web 開發人員工具中存取網站的程式碼。 F12 在鍵盤上。
找到您要尋找的特定程式碼，特別注意樣式編輯器。現在，將所有程式碼複製並貼上到您常用的程式碼編輯器中，即可開始創作。
使用掃描工具
同樣，與 Chrome 一樣，您也可以使用 Firefox 內建的檢查工具存取網站程式碼。如何操作：右鍵點選目標網站的任何可見部分，然後按 Q 或點擊 頁您也可以點擊 Ctrl + Shift + I （Windows、Linux）或 命令 + 選項 + I （蘋果系統）。
如下所示，您仍然可以使用樣式編輯器來尋找所需程式碼。然後將其複製並貼上到您能找到的任何最佳程式碼編輯應用程式中。查看 適用於 Mac 的最佳程式碼編輯應用程式.
使用 Firefox 中的「更多操作」選單
若要透過更多操作選單在 Firefox 中複製網站程式碼，請從要複製其程式碼的網站點擊右上角的三行選單按鈕。
定位 更多工具 ，然後輕點 Web 開發人員工具從這裡，您可以使用檢查器或樣式編輯器複製所需的程式碼。
對於檢查器，您可以使用鍵盤上的箭頭鍵或捲軸在條目之間導航。對於樣式編輯器，您可以使用右側導覽面板專注於特定元素。找到所需內容後，將程式碼複製並貼上到程式碼編輯器中，並根據您的喜好進行自訂。查看 如何使用 Firefox 中的「檢查元素」工具檢查任何網站.
如何使用 Edge 複製網站程式碼
您可以使用 Edge 輕鬆地以不同的方式複製網站程式碼，如下所示。
顯示頁面原始碼
若要透過查看 Microsoft Edge 中的頁面來源來複製網站程式碼，只需右鍵單擊目標網站的任何可見部分，然後選擇 查看頁面原始碼.
或者，您也可以直接按 Ctrl + U. （Windows、Linux）或 命令 + U （macOS），複製您想要的部分，將其貼到編輯器中，然後開始自訂程式碼。
使用 F12 快捷鍵
如果您使用的是 Edge，只需按下該鍵即可複製網站的程式碼。 F12 當您造訪您想要複製程式碼的網站。
點擊確認您的選擇 開放開發工具在開發者儀表板中，您可以輕鬆複製所有想要的程式碼並加快您的工作速度。
使用掃描工具
若要使用 Edge 的檢查器複製網站程式碼，請前往要複製其程式碼的網站，右鍵單擊任何空白部分，然後選擇 頁.
您也可以點擊 Ctrl + Shift + I （Windows、Linux）或 命令 + 選項 + I (macOS)。然後，您可以複製並貼上要使用的程式碼並進行修改。查看 如何使用 Canva 建立個人網站：逐步指南.
使用 Edge 中的「更多動作」按鈕
Edge 還允許您透過「更多操作」功能表存取其開發者工具面板。為此，請前往要複製程式碼的網站。點擊右上角的「更多」按鈕，然後點擊 更多工具 ， 然後 開發者工具.
如果您的瀏覽器缺少上述任何選項或功能，您可能需要檢查其是否已更新。具體方法如下： 如何檢查和更新 Chrome、Firefox 和 Edge.
無論您採用哪種方法以及使用哪種基於 Chromium 的瀏覽器（Chrome、Brave 或 Edge），您都可以透過點擊開發人員工具面板中的「更多」按鈕並選擇來搜尋特定檔案或項目 بحث或者，只需按 Ctrl + Shift + F （Windows、Linux）或 命令 + 選項 + F （蘋果系統）。
檔案開啟和執行命令選項對於在網站上尋找程式碼也很有用，Firefox 中的樣式編輯器以及 Chrome 和 Edge 工具列中的檢查器也很有用。查看 如何輕鬆建立專業網站.
使用可用的網站代碼來提高您的技能。
無論您使用的是 Chrome、Firefox、Edge 還是其他基於 Chromium 的網頁瀏覽器（就此而言），您都可以透過複製現有網站的程式碼來節省大量時間和精力。
但是，網站程式碼只能用於離線學習和修改。嘗試建立現有網站的精確副本並按原樣發布可能構成版權侵權。您也可以使用行動程式碼編輯器隨時隨地學習程式設計。現在您可以查看 隨時隨地編寫程式碼：Android 上最好的 HTML 編輯應用.
