首頁 部落格 如何查看 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 以及工程師截圖拍攝
JavaScript 宣告: var、let、const
JavaScript 宣告: var、let、const
Trista
Trista
Dec 19, 2017
前端工程師、專業站長 的懶人工具包 Web Code Tools
前端工程師、專業站長 的懶人工具包 Web Code Tools
Free Resource
Free Resource
Jun 27, 2018
FB 分享引文功能
FB 分享引文功能
Austin
Austin
Nov 20, 2017