移动端开发真机调试神器——browser-sync

2024-08-27 13:08

本文主要是介绍移动端开发真机调试神器——browser-sync,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

原文链接:http://web.jobbole.com/87587/

前言:博主翻山越岭,找了很久的真机调试, 从老古董,weinre,到微信开发者工具,到最后的browser-sync,最后这个工具真的是眼前一亮~

本文默认前提:你已会使用gulp,npm,并且环境已经搭好

1.npm init

找到目录中的 package.json, 在文件中添加相关依赖包

"dependencies": {"async-each-series": "^1.1.0","connect-history-api-fallback": "^1.3.0","weinre": "^2.0.0-pre-I0Z7U9OV"
}

2.npm install 安装相关依赖文件

3.新建gulpfile.js文件,添加下面相关代码

3.1 引入组件

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

3.2 添加任务

gulp.task('browser-sync',function () {var files = ['**/*.html','**/*.css','**/*.js'
    ];
//代理模式(本地服务器)
    browserSync.init(files,{proxy: 'http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index',  //此处根据项目实际目录填写
    });
//本地静态文件
//     browserSync.init(files, {
//         server: {
//             baseDir: './src'   //该路径到html的文件夹目录
//         }
//     });
});

4.打开终端,在项目目录下输入命令   gulp browser-sync,出现以下形式

此时浏览器会自动打开 http://localhost:63342/nonghui/extend.html?_ijt=5d9fjooo2tdvvf1uh6tb8qmlma#/index 的页面,这与上面gulpfile.js设置的一样。

在手机(真机),只需要输入命令行中的  External 的网址即可看到要调试的页面了。而且,这个是多个浏览器统一的,你在电脑上滑动,点击,手机上都会执行相应的效果。同理,手机上的操作,电脑也会执行相应的效果。

注意:如果是用webstom自带的服务器开的网站的话,webstom还需要设置一下,勾选以下内容[使用webstom打开的页面默认为服务器打开的页面]

5.调试:

在浏览器打开  http://localhost:3001,进入到以下页面

勾选,remote debugger,之后点击 opens in a new tab,即可跳转到 weinre 页面。在weinre上审查元素的时候,手机上都会有相应的变化。

这里要注意一点:待调试页面要先启动后,再勾选 remote debugger,否则会由于获取不到而无法调试。

经过以上5个步骤,就可以在真机上调试了~


这篇关于移动端开发真机调试神器——browser-sync的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1111755

相关文章

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

基于Python开发批量提取Excel图片的小工具

《基于Python开发批量提取Excel图片的小工具》这篇文章主要为大家详细介绍了如何使用Python中的openpyxl库开发一个小工具,可以实现批量提取Excel图片,有需要的小伙伴可以参考一下... 目前有一个需求,就是批量读取当前目录下所有文件夹里的Excel文件,去获取出Excel文件中的图片,并

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

基于Python开发PDF转PNG的可视化工具

《基于Python开发PDF转PNG的可视化工具》在数字文档处理领域,PDF到图像格式的转换是常见需求,本文介绍如何利用Python的PyMuPDF库和Tkinter框架开发一个带图形界面的PDF转P... 目录一、引言二、功能特性三、技术架构1. 技术栈组成2. 系统架构javascript设计3.效果图

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序,采用T

使用Python开发一个图像标注与OCR识别工具

《使用Python开发一个图像标注与OCR识别工具》:本文主要介绍一个使用Python开发的工具,允许用户在图像上进行矩形标注,使用OCR对标注区域进行文本识别,并将结果保存为Excel文件,感兴... 目录项目简介1. 图像加载与显示2. 矩形标注3. OCR识别4. 标注的保存与加载5. 裁剪与重置图像

前端bug调试的方法技巧及常见错误

《前端bug调试的方法技巧及常见错误》:本文主要介绍编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugg... 目录调试基本流程调试方法排查bug的两大技巧如何看控制台报错前端常见错误取值调用报错资源引入错误解析错误

Android开发中gradle下载缓慢的问题级解决方法

《Android开发中gradle下载缓慢的问题级解决方法》本文介绍了解决Android开发中Gradle下载缓慢问题的几种方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧... 目录一、网络环境优化二、Gradle版本与配置优化三、其他优化措施针对android开发中Gradle下载缓慢的问

使用Go语言开发一个命令行文件管理工具

《使用Go语言开发一个命令行文件管理工具》这篇文章主要为大家详细介绍了如何使用Go语言开发一款命令行文件管理工具,支持批量重命名,删除,创建,移动文件,需要的小伙伴可以了解下... 目录一、工具功能一览二、核心代码解析1. 主程序结构2. 批量重命名3. 批量删除4. 创建文件/目录5. 批量移动三、如何安