對於稍微了解網頁設計、HTML、CSS 和 JavaScript 的人,或是前端工程師,在對一個網站的設計或行為感到好奇時,都會試著查看網頁的原始碼,去挖掘它是怎麼做的。或可能就只是想知道網站所使用的圖片的網址。
Chrome App 手機版無直接提供查看網頁原始碼的功能
一般我們在桌機版或電腦上的 Chrome,想要瀏覽網頁的原始碼是一件非常簡單的事!只要在網頁點擊滑鼠右鍵,不論是要「檢視網頁原始碼」或「檢閱元件」,都能輕易地查看一個網頁的原始碼。
但有的時候,我們的身邊就是沒有電腦,或沒帶筆電出門,這時就只有手機,我們要如何在手機上的 Chrome App 瀏覽器中查看一個網頁的原始碼呢?
如果在手機版的 Chrome App 上,點擊右上方的「⋮」按鈕,你可能會發現,在 Chrome App 中怎樣也找不到一個「檢視網頁原始碼」的選項可以點,所以在下一個段落,就要來分享如何在 Chrome App 手機版查看網頁原始碼!
用 Chrome App 手機版查看網頁原始碼!
在手機版的 Chrome App 上要查看網頁原始碼,主要可以分成以下三個步驟:
- 前往一個我們想檢視網頁原始碼的網站
- 直接編輯當前的網址
- 在網址的前方輸入「
view-source:
」
注意
在編輯網址時,要保留「https:
」,不要因為兩者都有「:」冒號結尾,就直接以「view-source:
」取代了!
你編輯後的網址應該會是這樣的格式:「view-source:
」+「含 https:
的網址」,如:「view-source:https://sharing-life-in-tw.blogspot.com」,你可以直接點擊連結看看會是什麼樣子的!其實跟電腦版的「檢視網頁原始碼」會是一樣的。
補充
如果你是 Apple 用戶的話,在 iPhone、iPad、iPod touch 或 Mac 上,Safari 似乎無法用這樣的語法來查看網頁原始碼。