指尖上行--移動前端開發進階之路（讀書筆記）----1.2頁面調試

chapter 1 移動頁面開發

• 頁面布局
• 頁面調試
• 常用庫和架構

1.2 頁面調試

1.2.1 Chrome開發者工具

Chrome為開發者提供了一個強大的工具來調試浏覽器上的網頁。————–Chrome DevTools

url：https://developer.chrome.com/devtools

Chrome調試工具除了能在電腦調試PC頁面外，還可以 調試Android裝置的移動端網頁。

準備工作：

• PC上需要安裝Chrome 32以上的版本
• 把Android裝置USB線連接配接到PC上
• 移動總段要更新到Android 4.0以上的版本，并需要安裝Chrome浏覽器

準備工作做好之後，就開始實際操作，進行調試了。

• 第一步：在Android裝置上點選設定，找到“開發者選項”，并且選中“USB調試”。（不同裝置的開發者選項打開方式不一樣，有的甚至是隐藏的，需要激活才看得到，具體操作可根據社保型号去百度搜）

  

• 第二步：在電腦哦Chrome導航中輸入Chrome://inspect,這時候能夠看到Chrome已經連接配接上了移動裝置。

  

• 第三步：在移動裝置中打開Chrome浏覽器，輸入需要調試的頁面，我們可以看到PC的Chrome顯示出了移動裝置上需要調試的頁面條目。

  

• 第四步：點選Inspect，就可以利用Chrome Dev Tools開始調試移動端頁面了。
  • inspect：檢查；視察
  • focus tab 切換（聚焦）頁面tab
  • reload 重制加載
  • close 關閉
  在電腦上做任何操作，手機也會響應該操作；反之在手機上做任何操作，電腦inspect頁面也會響應操作。即手機和電腦同步。

  

1.2.2 Mac電腦調試

蘋果IOS 6.0以上版本OS的Safari自帶了一個“Web檢查器”的功能性，通過它，可以對終端裝置的網頁做遠端調試。

具體步驟：

• 第一步：把終端裝置（iPhone / iPad）通過USB線連接配接到Mac電腦上，然後在IOS裝置的設定中依次找到“Safari>進階”，打開“Web檢查器”。
• 第二步：在Mac電腦的Safari工具條裡單擊“開發”菜單，選擇需要調試的裝置網頁位址。
• 第三步：在呼出Web檢查器之後，就可以在浏覽器中遠端調試IOS移動裝置的頁面了。

1.2.3 自研工具

内部工具MPT……