使用weinre 遠程調試移動設備上的網頁

baishancloud 發布于2019-08-20 13:49 / 2352人閱讀

摘要：簡介是一款類似于和的網頁調試工具，它的不同之處在于可以用于進行遠程調試，比如調試手機上面的網頁。

weinre簡介

weinre 是一款類似于firebug 和Web Inspector的網頁調試工具，它的不同之處在于可以用于進行遠程調試，比如調試手機上面的網頁。

weinre的安裝

weinre是用node編寫的，可以用npm來進行安裝(前提是您的機器上已經裝了node)

npm install -g weinre

Mac 和Linux下推薦使用

sudo npm install -g weinre

如何運行？

運行weinre之前，首先需要了解三個專有名詞

Debug Server：部署weinre的那臺服務器
Debug Client： Web Inspector 界面，主要用來展示頁面元素和控制臺面板。
Debug Target：你想要調試的網頁，通常是位于手機上的網頁。

安裝完成后在termial中運行以下命令

weinre --httpPort=8081 --boundHost=znchen.waijule.cn //你自己Debug Server的域名， 也可以使用ip地址)

想了解更多weinre的配置啟動項可以通過 weinre --help 命令來查看

也可以在HOME目錄下創建 .weinre/server.properties 文件

boundHost:    znchen.waijule.cn
httpPort:     8081
reuseAddr:    true
readTimeout:  1
deathTimeout: 5

這樣可以直接運行weinre 命令，它會自動讀取server.properties 里面的配置項。

打開瀏覽器，輸入 http://znchen.waijule.cn:8081

在需要調試的網頁中加入Target Script

到此，你就可以方便的查看Elements， Resource, Console, Timeline 等面板了。

GPU云服務器云服務器網絡設備調試員遠程調試 VS遠程調試移動設備

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81257.html

移動端真機調試實戰經驗

摘要：我個人比較推薦的方法是或者安卓手機的這種方式，比較簡單方便快捷，然后根據具體的環境再選擇更為合適的調試方法。本文首次發表于本人的個人博客：http://cherryblog.site/ ，歡迎大家到我的博客查看更多文章~ 前言在開發中前端免不了要進行移動端的開發，然而在電腦上看的樣式和手機上還是有一定的差距的，因為手機上有頂部的狀態欄和底部的菜單欄，特別是在qq內置瀏覽器中打開，差...

rainyang 2019-08-20 16:21 評論0 收藏0
9102了，你還不會移動端真機調試？

摘要：移動端調試困難很多時候，我們在進行移動端開發時，都是先在端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。移動端調試困難很多時候，我們在進行移動端開發時，都是先在PC端使用手機模擬器進行調試，沒有問題后，我們才會在手機端的瀏覽器進行測試，這個時候，如果沒有出現問題，皆大歡喜。但是一旦出現問題，我們就很難解決，因為缺乏可視化...

lushan 2019-08-23 16:16 評論0 收藏0
H5移動端調試—weinre

摘要：可以在上調試運行在移動端上的頁面。啟動調試客戶端在瀏覽器中打開即可啟動調試客戶端創建創建個頁面，并加入以下表示從代理服務中引入。一、背景： H5頁面在PC上調試起來很方便，但是在手機上卻很麻煩，此時移動端就像一個黑匣子，查看或修改DOM、CSS，localStore等變的很困難。這個時候遠程調試就孕育而生了。二、weinre 2.1 什么是weinre Weinre是單詞縮寫，全稱...

X1nFLY 2019-08-20 17:41 評論0 收藏0