響應式的網站的好處是在不同屏幕的平臺均可以訪問,現在的網站大多數都是響應式的,這樣不用再為移動端單獨開發樣式了。響應式網站我們也得在電腦平臺開發,電腦端調試樣式很方便,開發者使用的瀏覽器都會支持查看元素功能,通過這個功能可以很容易調試網站樣式并可以看到效果。一般情況手機界面我們可以縮小屏幕寬度來實現,或者通過瀏覽器的響應式設計模式進行調試。
不過有些情況是這樣的,我們在網站中通過一些判斷設備的代碼,使得某些顯示在手機和電腦設備顯示不同,比如加入廣告,像百度廣告并不支持響應式,而是手機廣告和pc廣告分離的,需要個字單獨添加,我們就得用一下判斷代碼來。
之前想著,如果手機瀏覽器也有想pc啥時給你查看元素那樣的功能,那就可以方便多了,可是發現并沒有這樣的瀏覽器,唯有個別瀏覽器支持查看網頁代碼功能,但是看到的只是純代碼。
在使用火狐手機瀏覽器時,發現有遠程調試功能,試了之后,發現這是站長們的福利呀。這功能可以通過pc調試手機上的網站。
火狐也有介紹,硬是以前沒找到:Debugging Firefox for Android with WebIDE
使用條件:
一臺運行著至少Firefox36或更新版本瀏覽器的桌面計算機或筆記本電腦
一臺 支持運行 Firefox for Android 的安卓設備,并且安裝運行了 Firefox for Android 35 或更高版本
兩臺設備使用USB連接起來
pc 版瀏覽器安裝ADB Helper組件
這三個條件具備后就可以輕松調試了
首先開啟手機版瀏覽器遠程調試功能:設置==》開發者工具==》勾選通過USB遠程調試
火狐瀏覽器遠程調試手機網頁 - 第1張 | 自由草
手機版這就設置好了,
電腦安裝好ADB Helper組件后,按Shift+F8(或者點菜單==》開發者==》WebIDE),打開WebIDE后,通過usb鏈接手機和電腦,當然得開啟手機的開發者模式和允許usb調試功能。鏈接后提示允許USB調試?確定。這樣才能調試到火狐瀏覽器。下來火狐瀏覽器彈出:入站連接,選擇允許。下來就連接上了
火狐瀏覽器遠程調試手機網頁 - 第2張 | 自由草
和調試pc網頁一樣,電腦調試,手機可以看到調試效果