免下載安裝 App!在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學 – telegram 下載

免下載安裝 App!在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學
(Copyright: photovibes / 123RF Stock Photo)

現代人手機不離身,無論你是什麼行業,都可能利用行動裝置來隨時隨地工作,尤其是工程師們幾乎將手機當成另一台電腦使用。就以我來說,大部分的工作都能透過瀏覽器來完成,因此行動裝置對我非常有用,只要打開瀏覽器就能做我想做的事,不少服務也會額外開發應用程式 App 能讓整個工作流程更簡化順暢,但我始終不是很明白為什麼 iOS 沒有內建讓瀏覽器檢視網頁原始碼的權限功能呢?對於很習慣查看網頁原始碼的工程人員來說 iPhone 好像少了一個功能。

其實網路上已經有許多教學,教你如何從 iOS 裝置例如 iPhone、iPad 來查看網頁原始碼,只要透過瀏覽器書籤就能做到,不用額外付費購買只拿來看原始碼的應用程式,相當簡單!

因為我平時非常需要從手機來檢視網站原始碼,因此就照著幾個教學實際操作一次,還真的可以做到類似從桌上電腦瀏覽器看原始碼效果,如果有類似需求的朋友可以照著以下教學操作,過程不會太複雜,而且只要一次以後就能透過書籤列的功能來查看網頁原始碼。

如何從 iPhone、iPad 瀏覽器檢視網頁原始碼?

STEP 1

開啟 iPhone 或 iPad 上的 Safari 瀏覽器(不確定 Google Chrome、Opera 或其他瀏覽器 App 能否適用),點選下方功能列中間的「分享」按鈕,如下圖擷圖位置。

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 2

點擊「新增書籤」將任一頁面加入書籤,我們只是要先建立一個稍後要修改的捷徑書籤。

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 3

接著複製以下的這段程式碼:
javascript:(function(){var a=window.open('about:blank').document;a.write('Source of '+location.href+'');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

以瀏覽器將它選取後點擊「拷貝」就能複製,記得不能漏掉任何部分(來自 Apple Toolbox)。

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 4

開啟瀏覽器的「書籤」功能(主頁面下方選單右邊數過來的第二個按鈕),編輯剛才我們加入的新書籤,將網站標題改為 View Source 或檢視原始碼,編輯網址部分,把前一步驟複製的程式碼全部貼上(長按住欄位就會跳出貼上),然後保存編輯後的書籤。

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 5

當你要透過 Safari 檢視網頁原始碼,只要打開書籤,點擊剛才建立的 View Source 書籤,就會自動在新分頁跳出該網頁原始碼,是不是非常簡單又好用呢?

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

比較可惜的是這個功能只會吐出純文字的網頁原始碼,沒有包含高亮或上色功能,在 debug 或研究原始碼時可能會比較吃力一些,但至少能解決需要在手機或平板電腦檢視原始碼的需求,有需要的朋友不妨在自己的手機建立一個能檢視網頁原始碼的書籤按鈕吧!

相關文章

  • 在 iPhone 捷徑設定「低耗電模式」自動化,減少耗電延長電池壽命
  • 如何開啟 iOS 相片、備忘錄等文件快速儲存至 Dropbox 功能?
  • iOS 14 預設瀏覽器郵件 App 設定教學,終於可以選擇第三方應用程式
  • iOS、iPadOS 無法打開此捷徑?開啟這項設定允許執行不受信任的捷徑來源

Ten articles before and after

Apple Safari – 以最漂亮的環境對待您的眼睛 – telegram 下載

FortiGuard Online Virus Scanner 免費線上掃毒 – telegram 下載

herdProtect 透過 68 種雲端掃毒引擎,檢查系統是否潛藏病毒等危害 – telegram 下載

Desktoppr 直接將你喜愛的高畫質桌布同步回 Dropbox – telegram 下載

iMobie AnyTrans:輕鬆在電腦與 iPhone、iPad 及 iPod 傳送相片、音樂或影片檔案(限時免費) – telegram 下載

【只送不賣】Part 10: Advanced SystemCare 全方位系統優化軟體,30 套 PRO 版大放送! – telegram 下載

Free Food Photos 免費美食圖庫高解析度原圖下載,可用於商業用途 – telegram 下載

Web Control 在網頁嵌入 Skype 免費即時交談工具,兩行程式碼輕鬆完成 – telegram 下載

VidtoMP3 – 線上將YouTube、MySpace等影音網站的影片轉為MP3檔 – telegram 下載

FonePaw HEIC 免費圖片轉檔器,將 .heic 轉換為 JPEG 和 PNG 格式 – telegram 下載