微信整合了社交，支付，自媒体等强大的功能，现在许多H5的网页都是通过微信的浏览的，所以在开发过程，是避免不了出现问题，但是在手机上浏览，我们是无法知道是哪里出错了。对于这个问题， 可以使用微信web开发者工具解决。
 
打开工具之后, 打开微信，扫码登陆

 
 
登录成功之后，点击移动调试，按照里边说明所示，

 

 
手机设置成功之后，点击 开始调试
 
 

 
转载于:https://www.cnblogs.com/tomtan/p/7327405.html

微信Web开发者工具只有window版本和mac版本，如果想要在Linux系统下运行微信Web开发者工具，需要花费很大周折。注：带 * 的步骤或文件为不确定是否管用的步骤或文件。
本人系统为Linux Mint 18.1版本。
1、下载nwjs
下载nwjs的SDK。
2、将微信web开发者工具拷贝到nwjs
将在window系统下安装的微信web开发者工具文件夹中的package.nw、icon.ico、*微信web开发者工具.exe拷贝到nwjs sdk解压后的文件夹内。
* 解压 微信web开发者工具.exe，将解压后的文件夹内的文件移动到nwjs sdk解压后的文件夹内。
3、修改代码
进入到nwjs文件夹，在终端内运行
$ ./nw
会出现提示 Cannot find module '......'
根据提示，在提示错误的文件内修改module名，因为名字大小写会有错误，比如appServiceConfig模块，它的实际模块名是appserviceConfig，这些都是大小写字母错误导致找不到模块。
会有几个文件需要修改，根据错误提示修改。
4、在微信小程序项目文件内创建run-detectors文件
在微信小程序项目文件夹内创建run-detectors文件，因为该文件没有扩展名，在linux系统会被认为是文件夹，导致找不到该文件导致报错。
5、下载wine
在命令行内运行
$ sudo apt-get install wine
在右键选择wine环境运行wcc.exe，会提示安装依赖。wcc.exe在linux的 /home/用户名/.config/微信web开发者工具/WeappVendor 文件夹内。
6、载入项目
在载入项目前，* 先在wine下运行wcc.exe和wcsc.exe(不提前运行wcc.exe和wcsc.exe的话可能会报错)。第一次载入项目后编译可能会慢一些，3、5s到10s左右，后面因为有缓存会快一些。
---------------------------------------------------------------------------------------------------------------------------
修改wcc.exe和wcsc.exe文件名，去掉.exe。
进入到package.nw/app/dist/weapp/文件夹，找到
commit/build.js、trans/transWxmlToJs.js和utils/vendorManager.js，将代码中的wcc.exe和wcsc.exe改成wcc和wcsc。
！！！使用编辑功能可能会报错，所以不要用自带的编辑功能。
7、编辑器
推荐使用webstorm，在File - Editor - code style - File Types内设置如图下所示。将wxss添加到css类型文件，将wxml添加到html类型文件。
微信的文件改变自动刷新会有3到5s的时间来编译，不是很快。

          
微信公众平台为广大开发者带来福音，强势推出微信web开发者工具，让开发人员可以通过这款工具方便快捷的在PC电脑端或者Mac端完成开发与测试，那么问题来了，微信web开发者工具如何使用？别担心，下面在此为大家简单介绍下使用方法吧！
1、首先用户需要做的就是先下载安装，并启工具。
windows 版本下载==> 链接: http://pan.baidu.com/s/1mh4sBJ6 密码: 5wq8
Mac版本下载        ==> 链接: http://pan.baidu.com/s/1jGRgWGQ 密码: 186i
2、这个工具有主要有3个功能：
使用真实用户身份，调试微信网页授权。
校验页面的 JSSDK 权限，以及模拟大部分 SDK 的输入和输出。
利用集成的 Chrome DevTools 和基本的移动调试模块，协助开发。
具体的使用方法和下载地址请访问：https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html


				
转载于:https://blog.51cto.com/aliyue/1772088

Linux微信web开发者工具
https://github.com/cytle/wechat_web_devtools
Linux微信web开发者工具, 可在 linux 桌面环境跑起 微信开发者工具,

原理是 微信开发者工具 本质是 nw.js 程序, 把它移植到 linux 下没大问题.

负责编译 wxml 和 wxss 的 wcc 和 wcsc (可能还有其他功能),

则利用 wine 来跑即可.
安装 Wine
请先安装 Wine

建议安装wine1.6
sudo apt-get install wine1.6
$ wine --version
wine-1.6.2

安装完记得配置
winecfg 
wcc 和 wcsc 编译错误

执行
sudo apt-get install wine-binfmt
sudo update-binfmts --import /usr/share/binfmts/wine
1.下载项目
git clone https://github.com/cytle/wechat_web_devtools.git
2.进入目录
cd wechat_web_devtools
3.自动下载最新 nw.js , 同时部署目录 ~/.config/微信web开发者工具/
./bin/wxdt install
运行
./bin/wxdt
4.设置文件夹权限
sudo chmod -R 777 ~/.config/微信web 开发者工具/

微信h5

小程序

升级篇
1.先卸载
sudo chmod 777 uninstall.sh 
./uninstall.sh
2.清理之前的文件夹
sudo rm -rf wechat_web_devtools-1.02.1805181
sudo rm -rf wechat_web_devtools-1.02.1805181.tar.gz
3.下载最新的，解压到opt中
4.进入安装
sudo ./bin/wxdt install
5.最好将文件夹拥有者改为你自己
sudo chown  jiqing:jiqing -R  wechat_web_devtools-1.02.1807200/
6.搜索启动！
字体
Ubuntu环境下编辑器字体安装

Ubuntu环境下默认没有Cosolas字体，同时目前无法修改字体，因此下载安装Consolas字体是较优方案，使得编辑器将显示更舒服。
下载
https://github.com/kakkoyun/linux.files/raw/master/fonts/Consolas.ttf 至/usr/local/share/fonts or ~/.fonts
重建字体缓存
# sudo fc-cache -f
确认字体安装成功
#sudo fc-list|grep Consol
重启微信开发者工具