在做手机端的web开发时调样式相当的不方便,可以安装weinre,让工程跑在手机上,在电脑上调节,即使在手机上看到效果。
1.首先安装weinre
npm -g install weinre
2.让weinre跑起来
weinre --boundHost -all-
此时终端会显示服务器的端口号,比如我的现在是8080。
3.在浏览器上输入localhost:8080打开weinre server
在你的index上引用(图中的Target Script)
http://localhost:8080/target/target-script-min.js#anonymous
其中的localhost换成电脑的ip
在终端输入命令获取ip
ifconfig
比如我现在的ip是192.168.1.116,工程跑起来的端口号是3000
点击http://localhost:8080/client/#anonymous进入到
在移动设备浏览器输入192.168.1.116:3000
刷新移动设备界面,出现如下图的界面表示与移动设备连接成功
点击Elements进入到下图界面便可以直接调样式,在移动设备上看到调试的效果
相关推荐
通过安装`grunt-weinre`插件,并在Gruntfile中配置相关任务,你可以在构建项目的同时启动Weinre服务。 总的来说,Weinre是移动Web开发中不可或缺的工具,它使得开发者能够跨越设备边界,高效地进行前端调试。结合...
因此,"weinre-jar"可能是weinre的可执行文件,开发者可以通过运行这个jar文件来启动weinre服务,然后在目标设备上配置相应的代理设置,从而实现远程调试功能。 总的来说,weinre-jarwap工具是移动Web开发者不可或...
- **weinre配置**:在PC上启动weinre服务,命令行输入`weinre --httpPort <任意未被占用的端口>`,如`weinre --httpPort 8080`。记录下这个端口号。 3.3、调试 - 在手机端,访问`...
- **安装Weinre**: ```bash cnpm install weinre -g ``` - **获取本地IP地址**: ```bash ipconfig ``` - **启动Weinre服务**: ```bash weinre --boundHost ``` - **添加脚本标签**:在`index.html`文件...
- 在命令行中输入命令启动weinre服务(确保已安装JDK): ``` java -jar d:\tools\weinre-jar\weinre.jar –httpPort 8081 –boundHost -all- ``` - `httpPort`用于指定服务端口; - `boundHost`参数设置为`-...
提供简单熟悉的mock请求的配置功能,并且配置也是自动更新。 可用作代理服务器,调试开发既有服务器的页面,可与mock功能配合使用 集成了weinre,并提供二维码地址,方便移动端的调试 可以作为connect中间件使用...
Fekit Mobile Debugfekit 插件替换html文件中的资源文件路径为本机ip地址,这样就可直接在手机访问该资源文件安装npm install fekit-extension-mdebug -g使用在要替换的html路径下运行fekit mdebug参数说明:-i 指定...
4. 调试工具支持:如使用 Weinre(WebInspector Remote)进行远程调试。 5. 更新的构建工具:可能包含了改进的命令行工具,方便开发者构建和打包应用。 在实际开发过程中,开发者需要理解PhoneGap的生命周期事件,...
1. **环境配置**:首先,你需要安装并配置开发环境,包括Node.js、Apache Cordova(PhoneGap的基础)以及各个目标平台的SDK,例如Android Studio或Xcode。确保所有必要的工具链正确安装并设置好,才能进行下一步的...
开发者需要配置Android开发环境,包括安装Eclipse或Android Studio,设置SDK路径,以及创建和管理Android虚拟设备(AVD)来测试应用。 6. **版本兼容性**:PhoneGap 2.9.1相对较老,可能不支持最新的Android版本...
虽然Chrome浏览器不在iOS上原生支持,但可以通过安装第三方浏览器,如Puffin或Mercury,它们支持Chrome的远程调试协议。这些浏览器通常需要在设置中开启远程调试选项,然后通过特定的端口连接到你的电脑上的Chrome...
支持weinre的注入 可做代理服务器使用 原理 将host配置成127.0.0.1或者设置当前设备的代理为catproxy的http服务器(包括端口和ip) 设置后所有请求都会被catproxy接管,catproxy会根据配置文件去请求响应配置的数据...
with features for web develop. ...特征: 主机模拟通过一些配置代理转发。 ... 将远程地址添加到响应头X-...node ./webproxy/proxy.js [--weinre | --beautify | --nocache | --debug] 配置 主机(支持第三方代理转发)
特征应用程序可以在本地http服务器上运行,也可以模拟/发布到Android / iOS 很多...例如开发,登台,生产(配置在gulpfile.coffee可用) 测试已配置并可以正常工作:单位(业力+摩卡咖啡)和端到端(量角器) Rollbar支
Webpack的核心概念是将所有资源视为模块,通过配置和插件实现模块的加载、打包和优化,支持CommonJS、AMD、ES6模块化规范,广泛用于现代前端项目。 4. **treer** - 快速生成当前目录结构描述。这是一个命令行工具,...
3. 调试:PhoneGap提供了远程调试工具,例如Chrome开发者工具或Weinre,可以方便地在设备上查看和修改代码。 五、进阶主题 1. 插件:PhoneGap的扩展能力在于插件,它们提供了更丰富的设备功能。例如,通过安装相机...
2. **Express框架**:在Node.js中,Express是最流行的Web应用框架,简化了路由设置、中间件使用和模板引擎配置,极大地提高了开发效率。 3. **移动Web适配**:针对不同移动设备的屏幕尺寸和操作系统,需要采用响应...
7. **调试与测试**:由于应用集成了Web和原生元素,开发者需要使用如Chrome DevTools或Weinre等工具进行远程调试。同时,也需要在实际设备上进行测试,确保在不同设备和操作系统版本上的兼容性。 8. **发布与分发**...
1. **环境配置**:了解如何安装PhoneGap、Cordova(PhoneGap的底层框架)和必要的开发工具,如Node.js、Android Studio或Xcode。 2. **项目结构**:分析phoneGap-master目录下的文件和文件夹,理解PhoneGap项目的...
通过配置主机或例如域,路径,正则表达式,通配符,通配符路径等)来操纵http请求和响应。 提供内置的移动调试模式 如果以上不能满足您的要求,您也可以使用来扩展其功能。 具体功能如下: 操作,以HTTP请求...