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

免下載安裝 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('< !DOCTYPE html>');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 或研究原始碼時可能會比較吃力一些,但至少能解決需要在手機或平板電腦檢視原始碼的需求,有需要的朋友不妨在自己的手機建立一個能檢視網頁原始碼的書籤按鈕吧!

分享本文