源代碼是所有網站背后的程序語言，很多時候，在網頁制作的工作中，我們常常需要學習優秀的網站，借鑒參考他們的頁面源碼，這就需要查看網站的源代碼（比如：圖片的地址，隱藏的背景音樂的地址等內容），文章將介紹如何在大部分常用瀏覽器（如：Google Chrome、火狐、360瀏覽器和IE瀏覽器）上查看網頁源代碼。

 

源碼是使用HTML編寫的，通過“瀏覽器”把它翻譯成網頁（可視化、可直觀的形式表現出來的頁面），源代碼是一種語言，組織排版網頁上的元素（圖片，視頻，音樂，文字等）的一種標準語言。網站源碼分為兩種，一種是動態源碼如：ASP，PHP，JSP，.NET，CGI等，一種是靜態源碼如：HTML等。

 

方法一：打開"瀏覽器"（如：Google Chrome、火狐、360瀏覽器和IE瀏覽器）。打開一個網頁。在這個網頁的空白處鼠標“右擊”---》“查看網頁源代碼”或“查看源文件” 即可在彈出的新窗口中瀏覽頁面的源代碼。

注：如果在網頁圖片和文字上“右擊”，在彈出的菜單里就沒有“查看網頁源代碼”這個選項了。

鼠標右擊查看網頁源代碼

 

方法二：打開一個網頁。使用快捷鍵“Ctrl+U”（Windows電腦）或“option+Command+U”（Mac電腦）來查看頁面的源代碼。

注：在Google Chrome、火狐、360瀏覽器中，在地址欄輸入命令，view-source:想要查看的網址，即可查看頁面的源代碼。

查看網頁源代碼窗口

 

方法三：通過瀏覽器中的“菜單欄”查看網頁源代碼。打開一個網頁。“查看”或“工具”---》“查看網頁源代碼”或“開發者工具”，即可查看頁面源代碼。

快捷查看網頁源代碼

常用的瀏覽器都可以在瀏覽網頁時，鼠標"右擊"網頁空白處，在彈出的菜單中找到“查看網頁源代碼”選項，點擊即可查看當前被打開的HTML網頁源代碼。  

 

如果JS代碼禁止用戶鼠標右擊查看源文件代碼時，可通過快捷鍵“Ctrl+U”查看網頁源代碼。

 

各瀏覽器通過菜單欄具體查看網頁源代碼

1)、谷歌瀏覽器（Google Chrome）查看源代碼的操作方法：在瀏覽器右上角“三橫”（自定義及控制 Google Chrome）控制圖標---》“更多工具”---》“開發者工具”（直接按”F12“也可打開“開發者工具”）。打開后，在“Elements”里的代碼就是該頁面的源代碼了。

注：在Google Chrome開發者的界面中。點擊頂部的手機平板圖標 Toggle device toolbar 按鈕，會變成手機瀏覽器的界面。輸入需要查看的手機網站，可以在“Elements”中查看手機網站的網頁源代碼了（如果不顯示手機頁面可以刷新一下網頁）。

 

Google Chrome開發者界面

 

2)、Firefox瀏覽器，查看頁面源代碼的操作方法：點擊火狐firefox瀏覽器上方“工具(T)”---》“Web 開發者”---》“頁面源代碼”，即可查看網頁源代碼。

Firefox瀏覽器查看頁面源代碼

 

3)、微軟IE瀏覽器，查看源文件的操作方法：通過IE瀏覽器菜單欄中的“查看(V)”---》“源文件”

 

微軟IE瀏覽器查看源文件

 

4)、360瀏覽器，查看網頁源代碼的操作方法：通過360E瀏覽器菜單欄中的“查看”---》“查看網頁源代碼”

 

360瀏覽器查看網頁源代碼