讓iOS的Safari瀏覽器支援檢視網頁原始碼技巧，隱藏必學招式

如果有在從事網頁設計工作，或是有自己在架站的用戶，那時常都需要檢視網頁原始碼，要找出網頁結構哪裡出問題，在使用電腦版很簡單，不過在手機上就會相當麻煩，但是終究有解決方法，這次要來分享一款 iOS 專用的檢視網頁原始碼App和直接透過Safari看見原始碼，相信網頁設計師朋友們一定會很想瞭解這些技巧。

 

iOS檢視網頁原始碼技巧1：View Source

步驟 1

這次採用的是 View Source 工具（載點在文末），可以免費取得，下載後直接開啟在退回主畫面。

 

步驟 2

透過 Safari 開啟想要查看原始碼網站，點擊最下方選單「分享」鈕。

 

步驟 3

從分享選單中，往下滑點擊「View Source」按鈕。如果是 iOS 12 或更舊版本，則需要點擊「更多」按鈕，把「View Source」的選項開啟，就能看見「View Source」按鈕。

 

步驟 4

就可以看見網頁的原始碼，而且還能夠支援高亮效果，瀏覽起來就不會過於太吃力；另外還能夠點擊右上角分享按鈕，會有兩種功能「Find（搜尋）」、「Copy URL（複製連結）」，前者功能是用來尋找關鍵字，會是多數人常用功能。

View Source 下載位置：點我去下載

iOS檢視網頁原始碼技巧2：隱藏招式

如果不想用 App ，那還有另一招式，也同樣只要一鍵點擊就能實現查看原始碼方法。此技巧支援 iPhone 、iPad 和 iPod Touch 設備，只能支援 Safari 上使用。

步驟 1

透過 Safari 隨便打開一個網頁，壓住最下方「書籤」鈕（右邊數過來第二個），選擇「加入書籤」，將網站加入到 Safari 書籤內。

 

步驟 2

加入完畢後，進入書籤列表，點擊右下角「編輯」，選擇剛剛加入的書籤網址，並且將網址改成下面這段程式碼，網站名稱則是可以改成「看原始碼」，最後點擊完成即可。

—

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))})();

—

 

步驟 3

完成以上所有步驟後，就可以直接透過書籤實現查看原始碼功能，只要透過 Safari 打開網頁，點擊「書籤」鈕，按下剛建立好的「看原始碼」書籤，就能夠在新分頁中看見網頁原始碼，夠方便吧？

 

不過這功能有個小缺點，只能夠看純文字原始碼，無法顯示高亮功能，所以要看原始碼 debug 時候，就會導致非常吃力。

但iOS檢視網頁原始碼技巧有兩種方式，選擇一種你覺得最方便的方法和容易排除問題的方式即可，最方便還是使用電腦網頁版會比較容易些。