程序调试主要有三大功能区:模拟器、调试工具和小程序操作区

模拟器

模拟器模拟微信小程序在客户端真实的逻辑表现,对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

编译代码

点击工具左下角的编译按钮,可以编译当前代码,并自动刷新模拟器,同时为了帮助开发者调试具体页面,可以选择自定义编译模式。

调试工具

Wxml Pannel

Wxml Pannel 用于帮助开发者开发 Wxml 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 wxss 属性,同时可以通过修改对应 wxss 属性,在模拟器中实时看到修改的情况。通过调试模块左上角的选择器,还可以快速找到页面中组件对应的 wxml 代码。

Sources panel

Sources panel 用于显示当前项目的脚本文件,同浏览器开发不同,微信小程序框架会对脚本文件进行编译的工作,所以在 Sources panel 中开发者看到的文件是经过处理之后的脚本文件,开发者的代码都会被包裹在 define 函数中,并且对于 Page 代码,在尾部会有 require 的主动调用。

Network panel

Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况

Appdata panel

Appdata panel 用于显示当前项目当前时刻 appdata 具体数据,实时地反馈项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。

Storage panel

Storage panel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

Console Pannel

Console Pannel 有两大功能:开发者可以在此输入和调试代码

小程序的错误输出,会显示在此处

Sensor panel

Sensor panel 有两大功能:开发者可以在这里选择模拟地理位置

开发可以在这里模拟移动设备表现,用于调试重力感应 API

小程序操作区

小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从小程序中回到聊天窗口,会触发一个小程序被设置为后台的api。

当小程序使用到多窗口的时候,可以在顶部操作区进行页面切换,需要注意的是这个操作只是为了方便开发者才存在的,在真实的微信客户端中是不会有的。

微信小程序调试php,微信小程序工具 程序调试的三大主要功能区相关推荐

  1. 微信小程序发现的一些小问题以及解决方案集合以及注意点

    最近一直在关注小程序开发,目前正在试着将公司的app转换为小程序执行,在此期间有遇到的一些小问题以及解决办法集合.当然这些都是我个人经验谈,对于小程序的底层框架我也是一知半解,很多也都无法解释的很清楚 ...

  2. 今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2...

    今天微信小程序发现wx.request不好使了,调试报错: 小程序要求的 TLS 版本必须大于等于 1.2 查官方文档 解决方法 在 PowerShell中运行以下内容, 然后重启服务器 # Enab ...

  3. 如何用微信web开发者工具测试调试并打包上传小程序

    厦门四六开科技给大家讲讲 如何用微信web开发者工具测试调试并打包上传小程序,其实还是很简单的,这个教程针对小白,大神请直接略过. 一.下载并安装软件(根据自己电脑实际情况选择版本安装) 如何用微信开 ...

  4. 微信小程序-开了调试Vconsole能正常运行,不开调试不能正常运行

    这个微信小程序太奇怪了,做了一点小改动要上线,在本地连接真机调试好好的,上到体验环境手机打开就不行了. 而且奇怪,体验版打开调试后又正常了,加载页面的时候报了一个错 "(in promise ...

  5. 微信开发者中调试企业微信小程序

    在微信开发者中要调试企业微信的小程序必须使用企业微信小程序插件: 该插件可通过 [设置]->[扩展设置]->[模拟器插件]中获取 安装完成之后更改运行模式.更改成[企业微信小程序模式]运行 ...

  6. 微信小程序购物商城系统开发系列-工具篇

    微信小程序购物商城系统开发系列-工具篇 微信小程序开放公测以来,一夜之间在各种技术社区中就火起来啦.对于它 估计大家都不陌生了,对于它未来的价值就不再赘述,简单一句话:可以把小程序简单理解为一个新的操 ...

  7. 一个C#程序员学习微信小程序的笔记

    一个C#程序员学习微信小程序的笔记 客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...

  8. 详解微信开放平台第三方平台代小程序开发业务基本接口调用逻辑

    详解微信第三方小程序代开发 微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 由百牛信息技术bai ...

  9. js微信监听返回_微信小程序(2)- 框架结构amp;运行环境

    一.小程序框架结构 小程序框架分场景获取.逻辑层和视图层 场景获取:场景值是用来描述用户进入小程序的路径,可以在小程序的生命周期onLaunch 或 onShow 里获取.也可以通过wx.getLau ...

  10. windows模拟微信小程序_Windows 版微信新版本内测!小程序可以直接添加到电脑桌面了...

    微信小程序在手机端的体验已经非常流畅了.手机端小程序入口多,用户对应该在哪里找到小程序,怎样关闭小程序,怎样搜索小程序等问题都已经养成了自己的使用习惯.但换到电脑端来看,一切就全然不同. 「你收到了一 ...

最新文章

  1. python爬取疫情信息html.xpath p标签_python xpath 如何过滤div中的script和style标签
  2. python入门到精通需要学多久-廖雪峰python教程要学多久-零基础学Python需要多久...
  3. 【Kotlin】IntelliJ IDEA 创建 Kotlin 项目
  4. react-native绑定优酷SDK-附效果图和源码
  5. javascript_如何不再害怕JavaScript
  6. 【Flink】Flink中流动的四种元素
  7. Eclipse中的m2e不支持如何修复maven-dependency-plugin(目标为“ copy-dependencies”,“ unpack”)
  8. java day05【数组】
  9. 128.深入 cookie ,session
  10. 目前自己的几种脱壳方式
  11. google搜索插件
  12. imx6ul使用官方SDK裸机及驱动包
  13. 愚人节导入_在愚人节的恶作剧破坏之后,如何重置键盘的映射?
  14. C语言——函数的声明
  15. 中国大学MOOC-翁恺-C语言程序设计习题集(学习笔记)
  16. Unicode以及字符集转换
  17. 一个完整小巧的Redux全家桶项目
  18. 零基础小白怎么自学软件测试?
  19. Tomcat启动异常 Failed to read candidate component class 解决办法
  20. 【附源码】计算机毕业设计java智慧工地管理系统设计与实现

热门文章

  1. 用Python爬虫爬取澎湃新闻【动态网页:Ajax 动态请求、异步刷新生成数据】的搜索结果(附代码讲解与整套代码)
  2. linux 系统中判别固态硬盘(SSD)和机械硬盘(HDD)
  3. Vue + elementui +router+swiper的几个不走弯路小技巧
  4. 软件工程_1三层架构
  5. servlert生成session传到jsp,servlert从jsp页面获取session的值
  6. matlab的数值求解实验报告,matlab计算方法实验报告5(数值积分)
  7. 用Python底层编写进行计量经济分析(四):自相关(原因、结果、检验:DW检验、补救:广义线性回归)
  8. 前端HTML关于QQ和QQ群在web页面直接打开的链接方法:
  9. 编织信用“大数据”平台 让诚信归位
  10. 4412第一部分 开发板入门