首頁 部落格 如何查看 iDevice 上的網頁程式碼?
Bye
Dec 19, 2017
iWare 的程式工程師。喜歡嘗新,從澳洲 SCUBA dIve 到杜拜 Skydive 都想挑戰一遍,志願是擁有郭婞淳的霸氣和戴資穎的腹肌。

如何查看 iDevice 上的網頁程式碼?

雖然現在在各大主流瀏覽器上,都幾乎有支援 RWD(Responsive Web Design,響應式網頁設計)檢視模式,但你是否曾經遇過,都已經使用電腦上的開發模式,看到的卻與手機上呈現仍不一致的狀況呢?在此提供一個能直接查看 iPhone Mobile Web 程式碼的方法。(本方法限於能使用 Safari browser 的 mac 電腦)

 

 

1. 開啟手機上 Safari Web Inspector 遠端除錯功能
(「設定」>「Safari」>「進階」> 開啟「網頁檢閱器」)

 

 

 

 

2. 手機使用 Safari 開啟欲查看之網頁,並連接至 mac 電腦

 

 

3. 開啟 mac Safari 「開發」選單
(若尚未開啟,請至「偏好設定」>「進階」> 勾選「在選單列中顯示「開發」選單」)

 

 

4. 從下拉列表內選擇 iDevice,即會列出當前網頁清單

 

 

5. 選擇欲查看之網頁後,Safari 會自動該頁面之程式碼

 

不過其實大部份的網頁,在瀏覽器的 RWD 模式的呈現上會是與手機上相同的,等到哪天真的遇上這種特殊案例,再使用這種方法試試看吧,也可以與我們一同分享是怎樣的情況下發生的哦!

圖片來源: Pixbay 作者 Pexels 以及工程師截圖拍攝
前端工程師、專業站長 的懶人工具包 Web Code Tools
前端工程師、專業站長 的懶人工具包 Web Code Tools
Free Resource
Free Resource
Jun 27, 2018
JavaScript 宣告: var、let、const
JavaScript 宣告: var、let、const
Trista
Trista
Dec 19, 2017
FB 分享引文功能
FB 分享引文功能
Austin
Austin
Nov 20, 2017