手机简单调试方法---备忘

(总结一下自己调试的简单方法,方便定位问题,下面几种方式学习成本很easy,一起成长,共同进步)

用浏览器打开页面 F12/command+option+i

  • 这时候会出现模拟手机的按钮(只要是前端开发行业,估计这个都不用多说😊)

连入同一环境开代理浏览器访问

  • 首先手机和电脑必须同一网络
  • 手机连上电脑代理
  • 在手机浏览器中输入---同一环境下自己电脑IP:8080/#/路由
    eg: http://192.168.1.101:8080/
    这样就可以边改边看效果

连入同一环境打开代理浏览器访问(扫码)

在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能,这让你可以在安卓设备上实时调试开发的内容
步骤:

  • 打开 USB 调试选项
    在安卓设备上,进入设置>开发者选项。
    注意:在安卓 4.2及以后的版本中,默认情况下开发者选项是隐藏的。要启用开发者选项,选择设置>关于手机然后点击版本号7次。
  • 在开发者选项中,选中 USB 调试复选框。
  • 在安卓上启用 USB调试之后会有一个警告,提示你是否要开启 USB 调试模式,选择 OK。
  • 连接你的设备
  • 在电脑端的 Chrome里,在地址栏输入chrome://inspect。进入后确认 Discover USB devices 已经勾选了
  • 最后提示ok?点击ok,选inspect即可

vConsole && vconsole-webpack-plugin

1.vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

  • 安装
    npm install vconsole
  • 在开发项目中引入dist/vconsole.min.js
<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

即可,更多参考https://github.com/Tencent/vConsole/blob/dev/README_CN.md

  • 在项目中的console就可以在手机中展示

2.vconsole-webpack-plugin

主要放在配置项里,也是基于vConsole开发的

  • 安装
    npm install vconsole-webpack-plugin --save-dev
  • 使用
    1.webpack.conf.js 文件配置里增加以下插件配置即可
// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({
            filter: [],  // 需要过滤的入口文件
            enable: true // 发布代码前记得改回 false
        }),
        ...
    ]
    ...
}

2.package.json 文件配置:

scripts: {
    "dev": "webpack -w --debug",
    "prod": "webpack -p"
}

3.webpack.conf.js 配置:

// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

// 接收运行参数
const argv = require('yargs')
    .describe('debug', 'debug 环境') // use 'webpack --debug'
    .argv;

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({enable: !!argv.debug}),
        ...
    ]
    ...
}

vConsole参考: https://github.com/Tencent/vConsole/blob/dev/README_CN.md
Chrome调试: http://wiki.jikexueyuan.com/project/chrome-devtools/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,397评论 19 139
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 4,172评论 0 0
  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 10,681评论 4 31
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,848评论 0 21
  • 就像 被小王子浇灌的玫瑰 驯养的狐狸 爱像传销 被洗脑 但上线上线 我没有下线
    大眼瞪阅读 689评论 2 0