As a programmer, no one can say that their code is perfect, no matter how good you are.

Since there is a problem, it is necessary to debug to find the problem, today to share a recently used H5 page debugging artifact Eruda.

Usage:

Method 1: JS introduction

<script src="//cdn.jsdelivr.net/npm/eruda"></script> <script>eruda.init(); </script>Copy the code

This method is simple to use, requiring only two lines of code. For those who use UNIApp to develop H5 page, there is no index. HTML file in the project by default, so I don’t know how to introduce it. Here is a brief description.

  1. Create a new HTML file in the project root directory.
  2. Copy the following basic template content into the HTML file, modify the meta and import JS based on it.
  3. Associate the path to the HTML file in the manifest.json->h5->template node.
<! DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> <%= htmlWebpackPlugin.options.title %> </title> <script> var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: Constant (a)') document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, Maximum-scale =1.0, minimum-scale=1.0' + (coverSupport? ', viewport-fit=cover' : '') + '" />') </script> <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" /> </head> <body> <noscript> <strong>Please enable JavaScript to continue.</strong> </noscript> <div id="app"></div> <! -- built files will be auto injected --> </body> </html>Copy the code

Method 2: NPM installation

 npm install eruda --save
Copy the code

In my opinion, the script tag can be used to introduce, there is no need to use NPM. After the above introduction or installation, a small icon will appear in the lower right corner of the page. Click the icon.

Feature list

1, the console

2, elements,

3, network Network request

4. Resources: Application + Source, a combination of the two.

Today is introduced here, if you have a better method, welcome everyone to like the message!!