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



免下載安裝 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在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 2

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

在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App在 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在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學,免下載安裝 App

STEP 4

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

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

STEP 5

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

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

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

Ten articles before and after

Nuage 在一個平台上管理所有網域名稱!強大搜尋工具查找可用網址後綴

Nuage Email 建立自訂電子郵件地址,自動連結你現有 Gmail 帳號

和 Facebook 朋友「保持距離」減少看到對方動態或讓對方看不到

使用 Facebook「隱私設定檢查」,三步驟快速調整臉書權限

Privacy Basics 臉書隱私設定三步驟調整貼文、應用程式和個人檔案權限

Cactomain 目標成為最簡單網域名稱註冊商,10 秒快速註冊網址教學

在 Google Domains 註冊購買網域名稱教學

使用 LINE 內建快取清理工具,手機輕鬆瘦身空出更多可用容量

將 Instagram 帳號轉換為商業檔案教學,開啟洞察報告、聯絡按鈕功能

新增 Google Chrome 瀏覽器重新啟動書籤,一鍵快速釋放記憶體教學