微信小程序开发之——开发者工具介绍(1.7)
一 概述
本文主要对小程序开发工具进行简单介绍：
-
界面布局 菜单栏/工具栏 模拟器 编辑器 调试器
二 界面布局
三 菜单栏
四 工具栏
工具栏提供了一些常用功能的快捷按钮，具体解释如下：
五 模拟器
模拟器用于模拟手机环境，查看不同型号手机的运行效果
图中，上方的iPhone 12 5表示手机型号，单击可以切换成其他手机。由于不同手机屏幕的CSS像素不同，宽高比也不同，在开发小程序时应对常见的手机屏幕进行适配。100%表示缩放百分比，可以调节预览画面的大小。WIFI表示网络环境，还可以切换成2G、3G、4G或Offline(离线)，不同环境的网速不同，从而可以测试小程序的网络加载速度。模拟器的底部状态栏显示了当前的页面路径为/pages/index/index
六 编辑器
编辑器分为左右两栏，左栏用于浏览项目目录结构，右栏用于编写代码。在左栏中单击某个文件，就可以在右栏中对改文件进行编辑。
七 调试器
调试器类似于Google Chrome浏览器中的开发者工具。下面对调试器中的各个面板的功能进行简要介绍。
-
Console：“控制台”面板，用于输出调试信息，也可以直接编写代码执行 Source：“源代码”面板，可以查看或编辑源代码，并支持代码调试 Network：“安全”面板，用于调试页面的安全和认证等信息，如HTTPS AppData：“App数据”面板，可以查看或编辑当前小程序运行时的数据 Audits：“审计”面板，用于对小程序进行体验评分 Sensor：“传感器”面板，用于模拟地理位置、重力感应 Storage：“存储”面板，用于查看和管理本地数据缓存 Trace：“跟踪”面板，用于真机调试时跟踪调试信息 Wxml：Wxml面板，用于查看和调试WXML和WXSS
上一篇：
uniapp开发微信小程序-2.页面制作