pp电子

登录
免费开通
产品中心
更多服务

微信小程序教程入门篇【5】,微信开发工具的调试功效

—— 2017 ——
12/20
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 泉源：不详 作者：未知


1. 开篇导言    
  • 本节目的：通过之前的解说，，，， ，，相信各人关于微信小程序自己有了一定的熟悉。。本篇将专注于解说IDE的调试功效。。
  • 目的用户：无编程履历，，，， ，，但对微信小程序感兴趣的同砚。。
  • 学习目的：相识并使用微信开发工具的调试功效。。
  • 案例剖析：helloworld小程序。。
  • 代码下载
  • 传送门：

上一篇：微信小程序教程-入门篇【4】
下一篇：微信小程序教程-入门篇小结【6】

  • 备注：有编程履历或看过微信官网浅易教程的同砚，，，， ，，请酌情略过该章节。。


2. 调试区
如下图：
微信小程序教程入门篇【5】,微信开发工具的调试功效
调试工具分为6 大功效？？椋篧xml、Console、Sources、Network、Appdata、Storage。。
熟悉Chrome浏览器(F12)的同砚，，，， ，，可能眼前一(没错，，，， ，，基本一致)。。

3. Wxml panel
Wxml panel：用于资助开发者开发 Wxml 转化后的界面。。
通过关于页面结构及对应的 wxss 属性的修改，，，， ，，可以在模拟器中实验审查效果。。
通过调试？？樽笊辖堑难≡衿，，，， ，，可快速定位页面中组件对应的 wxml 代码。。
微信小程序教程入门篇【5】,微信开发工具的调试功效
(图片来自于官网)

4. Sources panel
Sources panel：用于显示目今项目的剧本文件。。
同浏览器开发差别，，，， ，，微信小程序框架会对剧本文件举行编译的事情，，，， ，，开发者看到的文件是经由处理之后的剧本文件，，，， ，，
开发者的代码都会被包裹在 define 函数中，，，， ，，并且关于 Page 代码，，，， ，，在尾部会有 require 的自动挪用。。
微信小程序教程入门篇【5】,微信开发工具的调试功效
  • 代码导航栏(蓝色区域部分)

top下为域名列表。。每个域名中包括与其相关的剧本文件。。

  • 代码显示区(绿色区域部分)

代码区的左侧，，，， ，，通过点击可以下断点。。
左下角的【{}】可以format代码结构。。

  • 调试区(橙色部分)

Watch：可以添加要审查的expressions(变量、表达式)。。
Call Stack：审查挪用客栈。。
其它部分留着以后详谈。。

5. Network panel
Netwrok Pannle 用于视察和显示 request 和 socket 的请讨情形。。后章节详细讨论。。
微信小程序教程入门篇【5】,微信开发工具的调试功效
(来自于官网)

6. Appdata panel
Appdata panel 用于显示目今项目目今时刻 appdata 详细数据，，，， ，，实时地反馈项目数据情形，，，， ，，可以在此处编辑数据，，，， ，，并实时地反馈到界面上。。
微信小程序教程入门篇【5】,微信开发工具的调试功效
上图将【Hello World】更改为【Hello MINA】

7. Storage panel
Storage panel 用于显示目今项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情形。。本项目为log，，，， ，，见下图：
微信小程序教程入门篇【5】,微信开发工具的调试功效

8. Console panel
Console panel：输出小程序的log或者输入，，，， ，，调试代码，，，， ，，如下图绿色部分。。
微信小程序教程入门篇【5】,微信开发工具的调试功效
通过点击console中右侧椭圆部分，，，， ，，可以快速定位到响应的文件中(【index.js [sm]:24 onLoad】)。。
橙色部分为调试代码的例子。。

9. 小结
注重：多下手来习惯于用调试工具来解决项目的问题。。

10. 预告
下一篇将对入门篇做一个总结。。



【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，， ，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，， ，，若有知识产权人并不肯意我们使用，，，， ，，若是有侵权请连忙联系。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，， ，，仅系客观性形貌，，，， ，，如您需要相识该类商品/服务详细的资讯，，，， ，，请您直接与该类商品/服务的提供者联系。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，， ，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。。

KESION 一直通过手艺立异，，，， ，，提供产品和服务，，，， ，，助力企业向数字化转型，，，， ，，通过科技驱动商业刷新，，，， ，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 微信小程序教程入门篇【6】,无编程履历微信小程序基本知识点

    本帖最后由 狂兔科技 于 2016-11-1 22:18 编辑 1. 开篇导言 本节目的：关于入门篇的总结 目的用户：无编程履历，，，， ，，但对微信小程序感兴趣的同砚。。 学习目的：对微信小程序的研发，，，， ，，有提要..

    微信小程序 2017/12/20 0:00:00

  • 微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

    本帖最后由 狂兔科技 于 2016-11-1 18:14 编辑 1. 开篇导言 本节目的：通过 上一节 的解说，，，， ，，相信各人对小程序框架MINA的目录结构和设置有了一定的相识。。接下来将会解说视图层，，，， ，，逻辑层

    微信小程序SaaS 2017/12/20 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序教程入门篇【5】,微信开发工具的调试功效 - KE