今天從哥們那裡學到了乙個小技巧，使用chrome自帶的多裝置模擬器來除錯頁面在不同裝置下的顯示效果。
特地上網查了一下，記錄一下。
如果想要在 chrome 上測試**在不同裝置，不同解析度的顯示情況，那麼就試試 chrome 開發工具的裝置模擬器吧。進入到開發者工具（快捷鍵 f12），然後點選右上角的鋸齒，在
setting
一側找到
overrides
，勾選上 show 『emulation』 view in console drawer 。之後點選』 hide drawer』上邊的三道槓，就能看到模擬器了，目前能模擬大部分流行的裝置了，不過沒看到 iphone 5s。
我的電腦上裝的chrome瀏覽器版本是31.0 版本的，可惜沒有找到在哪，公升級到新版本34.0後，預設就處於開啟狀態了。
Chrome開發者工具使用
elements 元素 允許我們從瀏覽器的角度看頁面，也就是說我們可以看到chrome渲染頁面所需要的的html css和dom document object model 物件。此外，還可以編輯這些內容更改頁面顯示效果。console 控制台 顯示各種警告與錯誤資訊，並且提供了shell用來和文件...
巧用chrome開發者工具
說明 截圖中的chrome版本為52，不同版本可能略有區別。開發時消除靜態資源快取不能立刻更新的困擾，勾選disable cache即可 切換顏色顯示格式 修改預設顏色顯示格式，在settings 控制台按f1 preferences elements color format 快速選中dom節點，...
Chrome開發者工具面板
network面板可以記錄頁面上的網路請求的詳情資訊，從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊 包括狀態 資源型別 大小 所用時間 request和response等 可以根據這個進行網路效能優化。我把google官方 上介紹network面板的圖貼到這裡，該面板主...