date: 2016-09-09 19:36:29

Overview

當(dāng)下移動端開發(fā)過程中大量使用前段H5、js等等技術(shù)，而這些web頁面的調(diào)試在Xcode控制臺中不太明了，經(jīng)常我們移動app運行了就是方法，但是不能顯示響應(yīng)的效果，這時候或許就是已經(jīng)報錯了，但是我們在Xcode控制臺是看不到這些錯誤。這時候我們就可以用功能強大的Safari瀏覽器來開啟開發(fā)模式連接iPhone來調(diào)試app臉面的web頁面了。

Safari設(shè)置

打開Safari偏好者設(shè)置，選中“高級菜單”，在頁面最下方看到“在菜單中顯示開發(fā)菜單”的復(fù)選框，在復(fù)選框內(nèi)打鉤，這樣設(shè)置完畢就能在Safari菜單中看到開發(fā)菜單了

Safari設(shè)置 icon

iPhone設(shè)置

打開iPhone手機設(shè)置app 選擇Safari，找到高級選項，有JavaScript開關(guān)web檢查器開關(guān)，講兩個開關(guān)都打開

iPhone設(shè)置 icon

調(diào)試

到此，準(zhǔn)備工作完成。這時候講iPhone鏈接到mac上，打開Safari瀏覽器，運行手機app里面的web頁面，在開發(fā)菜單中選擇連接的手機，找到調(diào)試的網(wǎng)頁，就能在Safari里面調(diào)試了

開啟調(diào)試 icon

手機截屏

手機截屏 icon

Safari調(diào)試窗口

調(diào)試窗口 icon

Safari控制臺

在Safari中鼠標(biāo)右鍵，選擇檢查元素，就可以看見Safari控制臺了。如果看不到檢查元素選項，依照上面Safari設(shè)置打開開發(fā)選項