Hello, everyone, I am for the majority of programmers brothers worry broken heart xiaobian, every day to recommend a small tool/source, full of your favorites, every day to share a small skill, let you easily save development efficiency, do not work overtime do not stay up late do not lose hair, is my goal!

When we were developing the mobile version of the web, we often had the following situation:

  • 1. During development, it runs well on my computer, but it dies when I open it on my mobile phone, but I can’t see the error log on my mobile phone.
  • 2. After going online, a user said that the page was out of order, but we couldn’t reproduce it ourselves and couldn’t see the user’s error message.

If (1) it can be solved by connecting the computer to the phone to view the log, then (2) it will be very passive without a complete front-end reporting system. Therefore, today xiaobian recommended a mobile phone front-end development debugging tool – vConsole.

features

  • Viewing console Logs
  • Viewing network Requests
  • Look at the page element structure
  • View Cookies, localStorage, and SessionStorage
  • Manually execute the JS command line
  • Custom plug-in

Get started

Download the new vConsole version. (Don’t download dist/vconsole.min.js directly from dev branch)

Or install using NPM:

npm install vconsole
Copy the code

Add dist/vconsole.min.js to your project:

<script src="path/to/vconsole.min.js"></script>
<script>
  / / initialization
  var vConsole = new VConsole();
  console.log('Hello world');
</script>
Copy the code

For TypeScript, we can introduce d.ts files:

import 'path/to/vconsole.min.d.ts';
Copy the code

preview

At the end

This issue is to share here, I am xiaobian South wind blowing, focus on sharing interesting, novel, practical open source projects and developer tools, learning resources! I hope to learn and communicate with you together. Welcome to follow my official account ** [Github navigation station] **.