這幾個星期學著用 Safari 的開發人員工具處理一些手機上遇到的問題。

Safari 預設是不會提供開發人員選單的,必須要自己去編輯→喜好設定→進階把「在選單列顯示“開發人員”選單」勾起來。

常用到的有幾個功能。

第一個是 UA 切換。在開發人員→使用者代理程式裡,從預設值切到 iOS 4.1 - iPhone 就可以在 UA 模擬成 iPhone ;其他的我用不到。

第二個是檢閱元件。網頁上隨便一個空白的地方按右鍵,選檢閱元件;或是(在 Windows 下)按 Ctrl-Alt-I 打開也行。右下角會顯示有多少錯誤,點開來以後會有各種錯誤的詳細資料。

有時候這些錯誤可以不用去理它,比方說某些逼不得已的 hack ,或是塞入 Google Map 結果被認定為不安全的 javascript ;但有些時候其實是程式上的問題,比方說少了 </a> 啦,巢狀 html 堆到後來頭昏堆錯層啦之類的,就要想辦法處理掉。

再來就是主控台。使用主控台必須要會一些基本的 javascript ,剛好頁面上原本就有 jQuery ,所以就拿來用。比方說我懷疑某個 .click() 事件在 click 以後不會被觸發,我就在主控台下 jQuery("#example").click( alert('OK'); ) 之類的程式然後再去點 #example 這樣。

樣式的部份預設會在右側,如果想要把其中幾條規則拿掉,就把勾勾勾掉就好了。要新增的話可以用 HTML 的功能加入 style 。

HTML 的部份比較常用"加入屬性"和"編輯為 HTML"這兩個功能。通常被我拿來加 class 、加 style 或註解掉 html 用。


Tags: Safari, 開發人員工具, developer tool


arrow
arrow
    創作者介紹
    創作者 repeat ❤️ 的頭像
    repeat ❤️

    旅行的記憶

    repeat ❤️ 發表在 痞客邦 留言(0) 人氣()