This article has been authorized by the original author

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

If you do front-end development, you understand that debugging code can be difficult. Especially with JavaScript, a small error can sometimes take hours to debug. For different browsers, operating systems, and devices, errors are inevitable.

This article mainly lists some debugging tools, which you can choose according to your situation.

Development tools in Web browsers

Any modern Web browser comes with powerful tools for debugging applications. Using the console statement cconsole.log(), using the alert() pop-up window, and using the debugger statement to pause code execution are all helpful for debugging.

You can also use network checkers or CSS style checkers to make debugging easier and smoother.

Any modern web browser comes with powerful tools to help debug your application. It can be as simple as a console statement using console.log(), a pop-up window using alert(), or even a debugger statement that pauses code execution. These tools are very helpful for our debugging tasks, especially debugger statements.

Postman

Address: www.postman.com/

Almost all front-end applications send and receive JSON responses and requests. Applications can do a lot of things with the request API, such as authentication, user data transfer, and even something as simple as getting the current weather of your location.

Postman is one of the best tools for debugging interfaces. It works on MacOS, Windows, and Linux systems and can quickly and easily send REST, SOAP, and GraphQL requests directly.

With Postman, we can tune requests, analyze responses, and debug problems. This is helpful when you’re not sure if the problem is on the front end or back end.

CSS Lint

Address: csslint.net/

CSSLint is a tool designed to help you find problems in YOUR CSS code. It does basic syntax checking and uses a set of preset rules to check for problems in your code. Rules can be extended.

JSON Formatter & Validator

Address: jsonformatter.curiousconcept.com/

It is difficult to spot syntactic errors or incorrect key values in unformatted JSON because it is difficult to read. With compressed JSON files, it can be difficult to find errors, so we need a formatting tool.

The JSON Formatter & Validator tool is a tool for formatting JSON. The tool can also validate JSON to the RFC standard.

Sentry

Address: sentry. IO/welcome /

No matter how well you test an application, there will always be bugs. Some bugs don’t always show up. Code that works well during testing may break while a user is using it, but when the application crashes in front of the user, you don’t see the error. But to be honest, the program generates a lot of logs every day, all the time, on different servers, and if you have more than one service maintaining the logs, you can’t see the amount of logs. When you go back to the log one day when a user has called to rant about it, you will find that the log is useless: there is no context, you don’t know what the user did to cause the exception, there are too many exceptions (never looking at the log) and you don’t know how to start.

Sentry, a real-time event logging and aggregation platform, is here to help us solve this problem. It is designed to monitor errors and extract all the information needed to perform appropriate after-the-fact actions without any of the hassle of using a standard user feedback loop.

Sentry is a logging platform, which is divided into client and server. The client (currently Python, PHP,C#, Ruby, etc.) is embedded in your application. When an exception occurs in the application, it sends a message to the server, which logs the message to the database and provides a web program for easy viewing. Sentry is written in Python and is open source with excellent performance and easy to extend. Its current famous users include Disqus, Path, Mozilla, Pinterest, etc.

JSHint

Address: jshint.com/

JSHint is a Javascript code analysis tool that not only helps us detect ERRORS and potential problems in Javascript code, but also helps us regulate code development.

JSHint scans a program written in JavaScript and reports common errors and potential bugs. Potential problems could be syntax errors, errors caused by implicit type conversions, leaking variables, or other outright problems.

JSHint scans programs written in JavaScript and reports common errors and potential errors. Potential problems could be syntax errors, errors due to implicit type conversions, variable leaks, or other pure causes.

Here is an example function that can be used to see JSHint in action:

BrowserStack

Address: www.browserstack.com/

More and more browsers now have their own kernels, and their features vary widely. As a front-end attacker, it can be quite painful to test your site’s compatibility with various browsers on different operating systems and mobile platforms. See in their own computer installed virtual machine configuration of various environments, have their own computer set up such an environment, and then one by one test, but human energy is limited after all, we can not install so many systems, so many browsers on the same computer. Thankfully BrowserStack is a boon for the front end.

BrowserStack is an online cloud-based testing tool that tests web browser compatibility so developers don’t have to prepare a lot of virtual machines or mobile emulators.

BrowserStack is an online cloud-based application that tests web browser compatibility across more than 100 browsers on nine major operating systems. Support for native testing and integration with Visual Studio. Or you can just go to Modern. Ie and test it online. Sign up now for a free 3 month trial, after 3 months you will be charged, after 3 months if you want to use it but don’t want to pay as a Chinese developer.

Medium original text: medium.com/better-prog…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.