免費資源網路社群

免費資源網路社群：免下載安裝 App！在 iOS 裝置 iPhone、iPad 檢視網頁原始碼教學

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

Posted: 29 Jan 2017 06:00 PM PST

現代人手機不離身，無論你是什麼行業，都可能利用行動裝置來隨時隨地工作，尤其是工程師們幾乎將手機當成另一台電腦使用。就以我來說，大部分的工作都能透過瀏覽器來完成，因此行動裝置對我非常有用，只要打開瀏覽器就能做我想做的事，不少服務也會額外開發應用程式 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><html><head><title>Source of ‘+location.href+'</title><meta name="viewport" content="width=device-width" /></head><body></body></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