微信公众平台为广大开发者带来福音，强势推出微信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

微信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的时间来编译，不是很快。

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
重启微信开发者工具

分享一款笔者开发的禁用web开发者工具的js库 disable-devtool
使用起来十分方便，引用一个script就可以
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

该库还有以下特性:

支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
支持几乎所有浏览器
高度可配置
使用极简、体积小巧 (仅6kb)
支持npm引用和script标签引用(属性配置)

以下是该库官方文档：
English | 在线试用/文档 | Gitee
1. 快速使用
1.1 npm 引用
npm i disable-devtool

import disableDevtool from 'disable-devtool';

disableDevtool();

1.2 script属性配置
<script id='disable-devtool' src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>

2.功能
disable-devtool 可以禁用所有一切可以进入开发者工具的方法，防止通过开发者工具进行的 ‘代码搬运’
该库有以下特性:

支持可配置是否禁用右键菜单
禁用 f12 和 ctrl+shift+i 快捷键
支持识别从浏览器菜单栏打开开发者工具并关闭当前页面
开发者可以绕过禁用 (url参数使用tk配合md5加密)
支持几乎所有浏览器
高度可配置
使用极简、体积小巧 (仅6kb)
支持npm引用和script标签引用(属性配置)

3. 使用
3.1 npm使用时的配置参数
安装 disable-devtool
npm i disable-devtool

import disableDevtool from 'disable-devtool';

disableDevtool(options);

options中的参数与说明如下：
declare interface optionStatic {
    md5?: string; // 绕过禁用的md5值，详情见3.2，默认不启用绕过禁用
    url?: string; // 关闭页面失败时的跳转页面，默认值为localhost
    tkName?: string; // 绕过禁用时的url参数名称，默认为 ddtk
    ondevtoolopen?(): void; // 开发者面板打开的回调，启用时url参数无效
    debugDelay?: number; // debug模式时的延迟 默认200ms
    interval?: number; // 定时器的时间间隔 默认200ms
    disableMenu?: boolean; // 是否禁用右键菜单 默认为true
}

3.2 md5 与 tk 绕过禁用
该库中使用 key 与 md5 配合的方式使得开发者可以在线上绕过禁用。
流程如下：
先指定一个 key a（该值不要记录在代码中），使用 md5 加密得到一个值 b，将b作为 md5 参数传入，开发者在访问 url 的时候只需要带上url参数 ddtk=a，便可以绕过禁用。
disableDevtool对象暴露了 md5 方法，可供开发者加密时使用：
disableDevtool.md5('xxx');

3.2 script使用属性配置
<script 
    id='disable-devtool'
    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
    md5='xxx'
    url='xxx'
    tk-name='xxx'
    debug-delay='xxx'
    interval='xxx'
    disable-menu='xxx'
></script>

注：

属性配置时必须要带上 id='disable-devtool' 属性
属性配置都是可选的，字段与3.1中一致，区别是将驼峰形式改成横线分割
该script标签建议放在body最底部

3.3 script不使用属性配置
<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
    DisableDevtool({
        // 参数与3.1中一致
    })
</script>