How to find errors in JavaScript code?
For example, I wrote a script, but it does not work. If you take, for example, Pascal, then there is a trace: you press a space, and the code is executed line by line. It can be seen when it enters the cycle, how many times it goes over there, when other things come out of it.

  • Open the browser console and see what errors appear there. - Visman
  • If you run the JS code in a browser, then the developer tools (including the console) will help you. - Regent
  • Is there an analogue of pulling in devuls? - Dimon
  • one
    @ Alexey Shimansky judging by item 2.2 of the user agreement , just copying without getting into disassembly will fail. And from scratch to write an article about this "health is not enough." You can try to make a free translation of the article from the official site . - Regent
  • 2
    @Regent that something is written on the site does not mean anything, for the agreement requires two parties who will enter into an agreement at some official level and will certify them to legal entities. What I’m writing — my super-revolving designed game not to copy — isn’t any power without a well-formed contractual relationship. And so you can safely with every user money to tear up, which will go to your site, and in paragraph 3.0 you will be written that the user is obliged to pay 1000 rubles. and that Every access to the Site the User agrees to comply with this condition - Alexey Shimansky

5 answers 5

My IMHO - Chrome Dev Tools is all you need. Link Specifically about JS debag - here

  • + more link - learn.javascript.ru/debugging-chrome - Joga
  • Please try to publish detailed answers containing a specific example of the minimum solution, supplementing them with a link to the source. Answers –references (as well as comments) do not add knowledge to the Runet. - Nicolas Chabanovsky ♦

Linter

At an early stage, even before launching the application, static code analyzers are very helpful, here are some of the most popular ones:

  • JSLint from Crockford's grandfather, creator of JSON. Smacks of valerian, but it works, except for the settings with gulkin nose.
  • JSHint is an excellent linter with flexible settings, 6k star on github.
  • ESLint , and the JSCS merged with it is probably the coolest thing, if you need to write your plug-ins for some specific checks.

Surely you can integrate them into your development environment so that they work in the background, and mark the errors found right in the code. For example, for WebStorm it is enough just to put a check in the settings. By the way, WebStorm has its own analyzer.

A little bit about typing

JavaScript does not (yet?) Have the ability to specify types for function arguments, but you can use, for example, JSDoc . Write something like this (note the comment format):

/** * Creates a new Circle from a diameter. * * @param {number} d The desired diameter of the circle. * @return {Circle} The new Circle object. */ Circle.fromDiameter = function (d) { return new Circle(d / 2); };

And now, if somewhere fromDiameter is called for example with a string, then jsdoc in simple cases will be able to determine this before running the program. In addition to this, jsdoc gives a lot of different buns, not counting the main purpose - to generate documentation for your comments.

A more brutal option for real bearded gurus (for example, from the AngularJS team) to take and rewrite everything into TypeScript, which is like JavaScript, but allows using (if desired!) Types for variables. And then, for example, you will immediately see (by mistake of the compiler) that you call a function that waits for a string, passing it a number.

Debugging

Here the good old Console.log('Ohh, shitt!') not been canceled. But of course you should not deny yourself the pleasure of using advanced debuggers. The same WebStorm has quite modern debugging capabilities, but all major browsers have this or that "development panel", with a debugger, profiler, and other goodies. Set breakpoints (and not simple, but with a certain tricky condition, for example, to stop only a second time, with a falling moon), see the call stack, the values ​​of variables (change them on the fly at will), etc. For a quick start in chrome - press F12 , then you will understand.

    If I understand you correctly:

    You need to use IDE to write and edit code. Popular IDE is currently being developed by JetBrains.

    Specifically, under JavaScript you can use WebStorm.

    At the same time, there is a debugger in it, where you can configure line-by-line code execution.

    • well, the debugger and browser have - ampawd
    • @Dimon updated. WebStorm is called IDE, not phpStorm. - no news
    • @nonews, phpstorm - Also Ide - Grundy
    • @Grundy I meant that the specific IDE under JS from JetBrains is WebStorm. A little wrong put it. - no news
    • 2
      @nonews, as I recall, their main difference is that phhstorm also allows php, and they are the same - Grundy

    Personally, I use the free cross-platform Visual Studio Code . It has a great "step by step" debugger and everything you need.

    • I do not understand how to use Visual Studio Code for javascript, html and css. Any extensions to put? How to start debugging? I don’t understand what to do with this Visual Studio Code thing. where you can read a good description of how a web developer to work with this business? - Dimon
    • 2
      Its debugger is used to debug javascript scripts on node.js, but there is also a plugin for chrome that allows debugging browser code. Here everything is painted with pictures. :) - Beast Winterwolf

    There are several options:

    1. Use IDE (WebStorm, for example)
    2. Browser capabilities (chrome dev dools, firebug, etc.)
    3. Debag using console.log (so-so method).