Apple新聞 iOS教學 iPhone教學

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

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

讓iOS的Safari瀏覽器支援檢視網頁原始碼技巧,隱藏必學功能

 

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

步驟 1

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

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

 

步驟 2

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

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

 

步驟 3

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

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

 

步驟 4

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

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

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

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

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

步驟 1

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

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

 

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

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

 

步驟 3

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

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

 

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

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

▼ 如果覺得本篇教學不錯,歡迎加入瘋先生粉絲團追最新教學技巧 ▼