前端

2022 年 3 月 26 日

使用 Chrome App 手機版查看網頁原始碼

已複製到剪貼板


對於稍微了解網頁設計、HTML、CSS 和 JavaScript 的人,或是前端工程師,在對一個網站的設計或行為感到好奇時,都會試著查看網頁的原始碼,去挖掘它是怎麼做的。或可能就只是想知道網站所使用的圖片的網址。

Chrome App 手機版無直接提供查看網頁原始碼的功能

一般我們在桌機版或電腦上的 Chrome,想要瀏覽網頁的原始碼是一件非常簡單的事!只要在網頁點擊滑鼠右鍵,不論是要「檢視網頁原始碼」或「檢閱元件」,都能輕易地查看一個網頁的原始碼。

但有的時候,我們的身邊就是沒有電腦,或沒帶筆電出門,這時就只有手機,我們要如何在手機上的 Chrome App 瀏覽器中查看一個網頁的原始碼呢?

如果在手機版的 Chrome App 上,點擊右上方的「⋮」按鈕,你可能會發現,在 Chrome App 中怎樣也找不到一個「檢視網頁原始碼」的選項可以點,所以在下一個段落,就要來分享如何在 Chrome App 手機版查看網頁原始碼!

用 Chrome App 手機版查看網頁原始碼!

在手機版的 Chrome App 上要查看網頁原始碼,主要可以分成以下三個步驟:

  1. 前往一個我們想檢視網頁原始碼的網站
  2. 直接編輯當前的網址
  3. 在網址的前方輸入「view-source:

注意

在編輯網址時,要保留「https:」,不要因為兩者都有「:」冒號結尾,就直接以「view-source:」取代了!

你編輯後的網址應該會是這樣的格式:「view-source:」+「含 https: 的網址」,如:「view-source:https://sharing-life-in-tw.blogspot.com」,你可以直接點擊連結看看會是什麼樣子的!其實跟電腦版的「檢視網頁原始碼」會是一樣的。

補充

如果你是 Apple 用戶的話,在 iPhone、iPad、iPod touch 或 Mac 上,Safari 似乎無法用這樣的語法來查看網頁原始碼。

分享文章

已複製到剪貼板

主題文章

查看 前端

關於看我所見

「看我所見」主題多元,分享作者的生活經歷、特殊經驗,舉凡:教育、生活、科技、3C、音樂、娛樂 ⋯⋯,我們也將持續優化,提供讀者最好的體驗!


Contacts

Ricky Chuang

看我所見

linktr.ee/5j54d93

最新文章