To access the website on the PC side, we can press F12 to open the debugging tool through the browser to view output logs, network requests, web page elements, cookies, and other information.
However, when we are developing mobile or mini programs and apps, there is an abnormal problem, and we cannot directly view the abnormal information. This article recommends two front-end developer debugging panels.
First upload the source code:
vConsole
A lightweight, scalable, front-end developer debugging panel for mobile web pages.
- Check the console logs
- View network requests
- Look at the page element structure
- Check out Cookies, localStorage, and SessionStorage
- Manually execute the JS command line
- Custom plugins
Address:The hyperlink login is visible.
eruda
Eruda is a debugging panel designed for the front-end of mobile web pages, similar to a mini version of DevTools, with key functions such as: capturing console logs, checking element status, capturing XHR requests, displaying local storage and cookie information, and more.
Button drag and drop, panel transparency size setting.
- Console panel: captures console logs, supporting log, error, info, warn, dir, time/timeEnd, clear, count, assert, table; Support for placeholders, including %c custom style output; Support filtering by log type and regular expression; JavaScript script execution is supported.
- Elements panel: View tag content and properties; See how your app styles on the DOM; Support for highlighting page elements; Support direct click selection on the screen; View the types of events bound on the DOM.
- Network panel: Capture requests and view information such as sent data, return headers, and returned content.
- Resources panel: View and clear localStorage, sessionStorage, and cookies. View page load scripts and style files; View page load images.
- Sources panel: View the source code of the page; Format HTML, CSS, JS code and JSON data.
- Info panel: output URL and User Agent; Support custom output content.
- Snippets panel: add borders to page elements; Add a timestamp to refresh the page; Custom code snippets are supported.
Address:The hyperlink login is visible. |
Posted on 6/29/2020 3:36:20 PM
|
|
|
|
Landlord