转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-09/

在开发javaweb应用的时候,如果遇见一个问题都会调试,debug,在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js,小程序可以吗?肯定是可以的!小程序的调试也可以在手机端进行远程调试。源码:https://github.com/limingios/wxProgram.git 中的No.4

开始演示

  1. 登录微信小程序,获取appId,远程调试必须有AppID

  1. 新建项目
    记住这个必须填入AppID

  1. 了解功能按键
    >预览:手机可以通过扫描二维码的方式在手机上直接观看小程序
    >远程调试:可以在手机上进行操作,并且可以在电脑上弹出对应的控制台,来观察操作的效果,同时在手机和电脑上进行调试。

  1. 修改初始化代码
    >源码:https://github.com/limingios/wxProgram.git 中的No.4
  • app.js
//app.js
App({
onLaunch: function (options) {
console.log("onLaunch")
},
onShow: function (options) {
console.log("onShow")
},
onHide: function () {
console.log("onHide")
},
onError: function (msg) {
console.log("onError")
},
globalData: 'I am global data'
})
  • app.json
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
  • index.wxml
<!--index.wxml-->
<view class="container">
{{motto}}
</view>
  • index.js
//index.js
//获取应用实例
const app = getApp() Page({
data: {
motto: 'Hello World',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
}, onLoad: function () {
this.setData({
motto: app.globalData
})
}
})

  1. 打断点,源码中加入debugger
  • app.js
//app.js
App({
onLaunch: function (options) {
debugger
console.log("onLaunch")
},
onShow: function (options) {
debugger
console.log("onShow")
},
onHide: function () {
debugger
console.log("onHide")
},
onError: function (msg) {
debugger
console.log("onError")
},
globalData: 'I am global data'
})

  1. 编辑工具下的调试
    > 开启调试器,可以通过f10单步进行调试

  1. 安装itools手机可以实时看到手机上的
    >扫描预览的效果

  1. 打开手机的调试

  • 重新进入小程序

点击vConsole

这里出发了onHide,上次在工具开发预览的时候并没有触发。.

  1. 开启远程调试
    >点击开启远程调试,也会生成一个二维码

  • 手机扫一扫,
  • 出现命中断点和远程调试窗口

  • 可以看到类似web调试的一些工具

  • 可以查看远端代码

PS:最后想到了什么老铁,可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了,不是所有的都可以的。远端调试必须知道他的APPID的,不是说直接看就可以了。

「小程序JAVA实战」 小程序远程调试(九)的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  3. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  4. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  5. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  6. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  7. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  8. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  9. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

随机推荐

  1. opencv:傅里叶变换

    示例代码: #include <opencv.hpp> #include <iostream> using namespace std; using namespace cv; ...

  2. js数组排序sort()方法

    一.sort方法升序: <script> var arr=[1,15,10,3,56]; arr.sort(function(num1,num2){ return num1-num2; } ...

  3. 条款11:记得在operator=中处理自赋值的情况。

    本来的版本是这样的: Widget & Widget::operator=(Widget rhs) { delete pb;//这里可能直接将rhs的pb删除了 pb = new (*rhs. ...

  4. react table dropdown

    <DropdownButton type="primary" trigger={['click']} onClick={() => this.detail(item)} ...

  5. Arcgis Add-In开发入门实例

    作为一个本科侧重于应用,工作之后却做了开发的程序员来说,做GIS,开发应该是一门必修课,只是,苦于各种原因吧,做GIS应用的人会开发的很少,做GIS开发的大部分都是计算机出身,痛心疾首啊-- 不好意思 ...

  6. 安装g++,在centos上执行yum -y install gcc gcc-c++ libstdc++-devel

    Loaded plugins: fastestmirror, security Loading mirror speeds from cached hostfile * base: mirrors.1 ...

  7. 深入了解zookeeper(三)

    一.ZooKeeper 的实现 1.1 ZooKeeper处理单点故障 我们知道可以通过ZooKeeper对分布式系统进行Master选举,来解决分布式系统的单点故障,如图所示. 那么我们继续分析一下 ...

  8. 通信对象System.ServiceModel.Channels.ServiceChannel 无法用于通信,因为其处于“出错”状态。

    问题描述:在客户端站点访问WCF服务后,在页面停留时间过长,客户端站点将会报错.报错内容如下: 通信对象System.ServiceModel.Channels.ServiceChannel 无法用于 ...

  9. 圆方树总结 [uoj30]Tourists

    圆方树总结 所谓圆方树就是把一张图变成一棵树. 怎么变啊qaq 这里盗一张图 简单来说就是给每一个点双新建一个点,然后连向这个点双中的每一个点.特殊的,把两个点互相连通的也视作一个点双. 我们把原来就 ...

  10. Instruments检测解决内存泄露以及进行性能测试

    1.启动Xcode自带的Instruments.这里有两种方法启动. 方法一: 方法二: 2.选择Leaks选项.(该选项用来进行内存泄漏检测) 说明: Leaks:找到引发内存泄漏的起点. Time ...