移動端開發真機除錯 神器

［本篇部落格預設你已會使用gulp，npm～並且環境已經搭好］

找到目錄中的 package.json， 在檔案中新增相關依賴包

1 "dependencies":

1

var browsersync = require('browser-sync').create(); //
自動同步

1 gulp.task('browser-sync',function

() );
11//
本地靜態檔案
此時瀏覽器會自動開啟http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index的頁面,這與上面gulpfile.js設定的一樣。
在手機（真機），只需要輸入命令列中的 external 的**即可看到要除錯的頁面了
而且，這個是多個瀏覽器統一的，你在電腦上滑動，點選，手機上都會執行相應的效果。同理，手機上的操作，電腦也會執行相應的效果。
注意：如果是用webstom自帶的伺服器開的**的話，webstom還需要設定一下，勾選以下內容［使用webstom開啟的頁面預設為伺服器開啟的頁面］
在瀏覽器開啟  
http://localhost:3001，進入到以下頁面
勾選，remote debugger，之後點選 opens in a new tab，即可跳轉到 weinre 頁面。在weinre上審查元素的時候，手機上都會有相應的變化。
這裡要注意一點：待除錯頁面要先啟動後，再勾選 remote debugger，否則會由於獲取不到而無法除錯。
經過以上5個步驟，就可以在真機上除錯了～ 
 
移動端真機除錯神器 spy debugger
language english 1 頁面除錯 抓包 2 操作簡單，無需usb連線裝置 3 支援https。4 spy debugger內部整合了weinre node mitmproxy anyproxy 頁面編輯模式 啟動命令 spy debugger w true weiner頁面除錯介面 a...
移動端開發除錯神器 vConsole
我們在開發手機版網頁的時候，常常會出現下面的情景 1 開發時，在自己電腦上執行得好好的，在手機上開啟就掛了，但是手機上又看不到error log 2 上線後，某使用者表示頁面失靈，但我們自己又重現不出來，看不到使用者側的出錯資訊。如果說 1 還可以通過電腦連線手機以檢視log來解決，那 2 在沒有完...
Mac iPhone 移動端真機除錯
之前除錯移動端頁面各種不方便，現在有了 mac iphone 簡直是如有神助了，相見恨晚！在此記錄一二備忘。首先在 iphone 上設定 settings safari advanced web inspector 選擇開啟然後在 mac 上設定 開啟 safari，此時選單欄上應該有個 devel...