一般调试微信页面的时候,我们都会按照微信开发的官网教程,让你去安装微信开发者工具,然后在微信开发者工具上调试, 这样有时候会不会感觉很麻烦? 而且这个工具还经常卡死.
1515737321133.jpg
当然 微信开发者工具主要是让你模拟页面嵌套在微信里面的状态,或者说可以把它想象成一个容器,  你把页面扔到这个容器里 看看协调不协调,美观不美观.  比如这个容器自带导航栏等等.
这些都不是我们接下来要关心的问题, 我们今天要说的是,为啥在其他浏览器就不能调试微信页面呢? (毕竟一方面你后端接口调用的是微信的)
那么你会不会很好奇这是为什么呢? 微信开发者工具都做了什么事情呢?
首先提到一个关键字: user-agent
User Agent中文名为[用户代理] ,简称 UA，它是一个特殊字符串头，使得服务器能够识别客户使用的[操作系统]及版本、CPU 类型、[浏览器](及版本、浏览器渲染引擎、浏览器语言、[浏览器插件]等。
想了解浏览器的前世今生的话,可以去看下这个:浏览器野史:
https://mkblog.cn/889/
想当初3Q大战那会.   QQ空间在 360浏览器上无法使用一样, 全都是通过 user-agent 搞的鬼.
我之前是做移动端的, 当发现这个玩意的时候,就像发现了新大陆一样, 自嗨了半天, 最后突发奇想,试了下能不能在火狐上调试微信页面.
然后百度了下,还真有这样的帖子, 但是细节不够详细.
我就在微信开发者工具上 用开发者模式,抓取到了  user-agent.
看到后面跟了这么几个参数, 然后恍然大悟,
AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 wechatdevtools/1.01.1712150 MicroMessenger/6.5.7 Language/zh_CN webview/15157367222261342 webdebugger port/9974
细节点:  wechatdevtools   webdebugger 等关键词
这肯定是在网络请求的时候,他们通过请求头拿到user-agent 这些信息,做了相应的判断和拦截.
然后,替换到火狐浏览器的user-gent, 完美的解决了普通浏览器无法调试微信页面的问题.
哦对了 火狐浏览器的user-gent原本是 FireFox 这个标识.火狐浏览器替换user-agent 的教程也附上:
火狐浏览器修改userAgent的办法一：
在火狐浏览器地址栏输入“about:config”，按下回车进入设置菜单。
找到“general.useragent.override”，如果没有这一项，则点右键“新建”->“字符串”，输入这个字符串。
将其值设为自己想要的UserAgent(下面附有常见UA)
火狐浏览器修改userAgent的办法二：
常见UA:
Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8.1.6) Gecko/20070914 Firefox/2.0.0.7
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.7) Gecko/20070914 Firefox/2.0.0.7
Mozilla/5.0 (Windows; U; Windows NT 6.0; en) AppleWebKit/522.15.5 (KHTML, like Gecko) Version/3.0.3 Safari/522.15.5
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/103u (KHTML, like Gecko) safari/100
Opera/9.23 (X11; Linux x86_64; U; en)
Opera/9.23 (Windows NT 5.1; U; en)
Mozilla/4.0 (compatible; MSIE 6.1; Windows XP)
Mozilla/5.0 (Windows; U; MSIE 7.0; Windows NT 6.0)
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
查看user-agent信息的网页(具体用法就是在对应的浏览器下打开这个网址):
http://tool.mkblog.cn/ua/
1515738894024.jpg
感兴趣的可以去了解下这个东西.   包括浏览器 模拟ipone , 模拟诺基亚n97  ,模拟黑莓手机,模拟windows phone, 模拟IE, 模拟 iPad显示效果 等.
比如我平时就喜欢通过 user-agent 把火狐改成ipad模式. 广告少很多,用起来很流畅,体验超级棒哈
1531965606190.jpg

                
其几天老师让我去负责微信方面的接入工作，这不是为难我王某人吗！！！

没办法，现在需要硬着头皮装微信开发者工具。

直接用的github上的一个教程。链接：https://github.com/cytle/wechat_web_devtools

因为我的电脑之前为了装微信和qq，安装过deepin-wine环境，所以在我安装微信开发者工具时，遇到了如下报错。



此问题的解决办法为：sudo apt-get install libgconf-2-4，问题即可解决。



启动./wxdt



 
            
转载于:https://www.cnblogs.com/wangjianupc/p/10587158.html

问题名称：开发者工具提示代理不安全

问题描述：点击确认或者取消均无效

适用范围：开发者工具 1.02.19版本及以下 以上版本可以尝试试试

问题的原因：

首先这个问题是微信开发者工具代理的使用问题，我们要着手通过修改代理配置进行修改，其他网络教程列如修改注册表，重新安装系统、还有修改微信开发者工具配置文件的教程都是乱用药，大家千万不要尝试。
解决方法:

一、根据问题的描述进行修改，在开始选择项目界面进行设置





二、通过自己设置代理进行问题的修复



注：这个问题不是什么大问题 ，和注册表无关，笔者出现这个问题后 查看过注册表，根本没有其他教程所所的注册表，所以注册表不是问题，而是系统的默认代理出问题了，所以这里需要的是改变代理的模式 ，或者修复好系统的代理，希望能够帮助到大家。

本文为大家介绍一下微信小程序开发者工具版本管理的一些使用方法，结合了笔者的一些使用体验和官方使用文档，致力于方便大家理解使用该项功能。
本文编写时笔者使用的开发者工具版本为Stable v1.02.1910120.
使用本教程前请安装好git，如何安装、使用、配置git和github请自行百度。
本文将分为三个部分进行讲解：1.上手使用；2.正常开发过程中的使用；3.其他功能。
补充部分：如何从一个空白项目拉取一个别人写好的项目。
1.上手使用
首先新建一个项目，点击右上方的版本管理
按钮，会弹出界面提醒未创建仓库，点击初始化。
本文以个人开发者的角度进行介绍，有资格开通微信开发者的读者可前往微信官网了解如何开通，但后面的使用过程大同小异。此处我们点击确定。
之后出现下图界面，我们先去进行网络设置。点击左侧栏设置。
之后点击网络和认证。
此处网络代理设置我们选择自动，认证方式选择使用用户名和密码，此处以github为例，gitlab以及其他代码管理仓库网站的使用大同小异。填入github的账号(邮箱用户名均可)与密码。
之后我们到github上创建一个仓库。
创建之后保留弹出的页面，我们需要此处给予的仓库URL地址(也可以先复制，待会儿会用到)此处选择HTTP或SSH均可。
我们回到开发者工具，点击远程，进行远程仓库的添加。
填写好名称，将刚才复制的URL贴到上面去，点击确定。
添加完成过后，我们可以去尝试写点东西然后push一下。
修改过后的文件边上会有M(modified)的标识，表示该文件已被修改但未提交(commit)。
此处顺便给出在版本管理中文件边上各个字母的含义[1]：
U ：文件未追踪(Untracked) (在项目目录中添加了新的文件并进行了修改)
A： 新文件(Added, Staged)
M ：文件有修改(Modified)
+M ：文件有修改(Modified, Staged)
C ：文件有冲突(Conflict)
D ：文件被删除(Deleted)
重新打开版本管理，会发现此时出现这样的界面：
这个时候对上面的文件进行勾选，就可以在下面写下标题和描述后进行提交(commit)了。
我们可以在历史一栏中看见我们的文件变动情况。
然后就可以push了。这里由于仓库是新建的还没有分支，这里选推送到新的分支并起个名字。
如果没有别的问题应该就会提示成功。回到github，就能看到仓库被更新了。
对应的中文操作和英文这里给出一下：
push,fetch,pull
至此我们基本工作就做好了。
2. 正常开发过程中的使用
接下来根据开发时的一个流程来简单叙述一下：
现在我们位于的是master分支，按照一般开发习惯，我们先分出一个develop分支用于开发场景：
随后我们switch到这个分支，这里对应的中文是检出(笔者一开始找了半天不知道哪里switch，感觉这个中文翻译怪怪的)
这里不方便截图就直接手机拍屏了...
此时可以看到head移到了develop分支上。
之后开发场景中又分为功能开发和bug的修复，我们继续在develop下创建两个分支，并switch到function分支开始进行小程序的功能构建：
现在开始我们就可以愉快地打代码了。
同样的，完成代码的编写后，我们将代码上传至仓库，这里虽然是个人项目，但是保持好习惯，我们先fetch再pull再push。
要注意的是这里因为第一次push的时候已经创建了一个远程的仓库分支，所以我们这里直接选上面的选项选好刚才创建的分支推送即可。
当我们完成了代码的一部分(以fix_bug为例)后，我们可以选择把这部分合并入父分支(dedvelop)，并将原来的子分支删除，再push。注意的是这里合并是将选择的分支合并至当前，也就是head 分支，所以我们先switch到develop再进行合并：
一般我们应该使用no ff模式，保证删除分支后仍保留信息
3.其他功能
这个工具同样也涵盖了git我们能用到的一些其他功能，可以说对于不习惯用命令行而喜欢gui的人来说是个福音。
首先来介绍一下stash(贮藏)。它的使用场景一般在于先将手上的工作放下，给你放好，方便用户在切换分支做完别的工作回来继续完成这些未完成的工作，此时用stash避免了commit多次，而将工作存在了本地，方便用户操作和使用。在小程序开发工具中，在对工作进行了修改而未commit时，贮藏按钮会允许按下：
我们按下贮藏按钮查看一下工具给我们什么提示：
这里的意思就是这一部分的修改会被贮藏起来，之后项目回到修改之前的状态。我们到贮藏区去看可以看到我们贮藏起来的部分：
应用贮藏后就会回到刚才未commit前的状态，若贮藏恢复时存在冲突，贮藏将会不成功，并弹出提示让用户解决冲突。
其次来谈谈标签(tag)。
为分支添加标签直接在分支处右键创建标签即可。
标签随后可以在下面的标签栏看见，右键它可以发布到远程仓库去：
总结
我们可以看到微信小程序开发者工具这个版本管理系统的gui还是十分友好的，大多数功能易懂好用，对于不喜欢用命令行的用户方便了不少。
补充部分
鉴于后来有读者反映不知道如何从空白项目拉取一个已有项目，笔者发现自己也确实疏忽了这一点，特于此进行补充。
首先来创建一个空的新项目。
之后我们创建一个本地代码仓库，但要注意的是创建的时候图示两项需要去勾，保持项目是干净的，避免出现冲突无法合并的情况。
之后按照上文所提到做好应有的配置，准备好拉取一个已有的仓库。
按照一般操作我们需要先fetch到操作记录然后再pull分支。
之后我们在历史可以看见这个仓库的所有提交历史。
接下来是最重要的一步：我们需要将head重置到这个操作记录中的head，以保证之后我们在pull合并的时候不会报错no merge base found(没有找到合并的基，大意也就是会发生冲突)。如果多人协同工作过程中，fecth过后pull失败，亦可以尝试通过该方法解决，但是要注意自己工作区的文件修改不要丢失，当然最好的方法还是去找出冲突在哪。
之后弹出的框中也是需要对这个选项去勾，因为我们并不需要这个空白项目中的文件所以当然应该舍弃掉。
之后我们可以留意到隔壁的文件目录随之也会更新了，也就是说基本操作已经成功了。
之后我们就是要进行pull的操作，需要注意的是这里的选项我们应该选为变基，把项目的基改成与我们要拉取的项目相一致的。
至此我们就成功地把一个线上的项目拉到了自己的本地并且可以开始协同工作了。
参考资料：
[1]:8.微信小程序目录边有个M、U是什么意思？ by TensorFlow开发者 https://www.jianshu.com/p/ec670f500043