One, foreword

Why do we need to debug the built-in browser of wechat on PC? Personally, I think the reasons may be as follows:

1. When users open the web page in the built-in browser of wechat on the computer and encounter problems, the development needs to troubleshoot the problems

2, view the code of the official website is difficult to view, it is not convenient to debug, but it is difficult to analyze THE API request packet capture, and now I will not use the packet capture software, exposed

3, some public account needs to be forced to open in the wechat browser

Two, quick start

Step 1: Check the built-in browser version of wechat

Create a new HTML page, write the following code, upload the HTML file to the server, and then visit the wechat browser on the PC side to view the Chrome kernel information called by wechat & record the path –resources-dir-path.


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>PC - View wechat built-in browser version</title>
</head>
<body>
    <script>
        window.open("chrome://version");
    </script>
</body>
</html>
Copy the code

Sweet little quilted jacket have help you repair the online links: demo.polyv.net/oujiale/dem…

When you open the page, you will see the following image. Note the information in the following two locations

  • Chromium 53.0.2785.116
  • –resources-dir-path=”C:\Users\lenovo\AppData\Roaming\Tencent\WeChat\All Users\CefResources\2581″
  • C:\Program Files (x86)\Tencent\WeChat\WeChat

Step 2: Download devTools_resources.pak

Due to the different versions, you need to download the corresponding version of devTools_resources.pak. To be honest, I don’t know where to download it, but I just saw the link on the Internet for Chromium version.

If your Chromium version is as 53.0.2785.116 as mine, you can click the download link to download. The download link is cdn.fyun.org/blog/typech…

Place devtools_resources.pak above in the –resources-dir-path directory

Step 3: Configure wechat startup parameters

In the shortcut of wechat, right-click on the property and add -remote-debugging-port=8000

Note: Remember to restart wechat and log in.

Step 4: before viewing the public number, it is best to put a PAK file under the wechat installation directory, because I did not do this operation, and then right-click did not see the debugging menu, see personal like it, there is a problem to do it again.

Open the official account (the Mining developer community), click on “Historical Articles”, open the page, right click, you will find the menu bar with the box column in the picture, click on “Show DevTools”, you can happily debug.

Third, Q&A

Q1: Why do you not see the “menu bar of the box column in the picture”?

A1: You can also put a pak file in the wechat installation directory, try

Explore links

  • Wechat built-in browser to do things debugging mode
  • Use PC wechat to debug authorized web pages
  • “Flirting” wechat PC browser built-in browser