Tips for front-end js debugging

Tips for front-end js debugging
This article summarizes some of my long-term js development and team collaboration issues. This article emphasizes debugging skills. The specific implementation of code logic is not described in detail in this article. Chrome is used as the development browser in all scenarios in this article. Mastering these tips can effectively improve your work efficiency or reduce the chance of low-level errors. If any Readers discover any errors in this article, please point out them in time, and you can also add questions through comments. ==== Scenario === A. Many front-end applications for form submission follow the procedure below. 1. Compile html. 2. Bind The form submit event to verify each form item. 3. If the form is successfully verified, the form is submitted. If the form fails, an error is prompted. Next, let's start debugging. After each code modification, refresh the page, refill in the form, and click Submit. In terms of the development process, the above steps are completely correct. However, it is a little complicated to handle errors in the debugging phase. You can use the following steps to reduce debugging complexity. 1. Compile html. 2. Set correct and valid default values for all form items. 3. Click Submit to remove the default value after the backend logic (or ajax Interface) is correct. 4. Bind The form submit event to verify each form item. 5. If the form is successfully verified, the form is submitted. If the form fails, an error is prompted. B. Most of the students have compiled local time-based programs. For example, the page stopwatch, countdown, calendar, and so on. During the debugging phase, many users should also modify the local time to simulate different situations. It is a typical windows user interface for modifying local time. Okay, everything is so familiar, although this method is the most direct and most effective method. Here I will introduce you to a more convenient solution. Copy code 1 var getNow = (function () {2 // If DEBUG is false, the actual time is returned, and the simulation time is returned for ture. 3 var DEBUG = true; 4 5 // simulate a time by modifying the year, month, day, minute, and second milliseconds. 6 var now = new Date (2014, 10, 24, 0, 0, 0, 0 ). getTime (); 7 var begin = new Date (); 8 return function () {9 if (DEBUG) {10 var t = new Date (). getTime (); 11 now + = t-begin; 12 begin = t; 13 return new Date (now); 14} 15 return new Date (); 16}; 17 }) (); copy the code to replace new Date () in the Code with getNow (). When you need to simulate the modification time, set DEBUG to true and specify the simulation time. Remember to set DEBUG to false after debugging. C. Set chrome cross-origin when you develop js locally and need to call remote interfaces across regions. Set your chrome as follows. 1. Create a chrome shortcut. 2. Right-click the new shortcut of the attribute and append "-- args -- disable-web-security" to the end of the object column ". 3. Close all chrome and start from the new shortcut. If the following yellow lines are displayed, the setting is successful. D. Regular Expressions if your regular expressions are not very good, you may want to test your regular expressions in the regular expression test tool before entering the code. Try to avoid repeatedly debugging Regular Expressions in your code. Online regular expression test tool: http://tool.oschina.net/regex =========== any point mentioned in this article is very basic, and there is no write too comprehensive. You can reply to me with your own insights or good debugging skills. The time of any programmer is very valuable. On average, the effective coding time of a programmer in a day is 2-4 hours. Do not waste too much time on debugging. I have witnessed with my own eyes that I have repeatedly filled out forms and submitted forms on the Form Verification-> form submission function, so that I can find the error source after dozens of rounds, i'm also drunk. I have witnessed with my own eyes that I have built more than 20 php and java code environments in order to cooperate with backend development and debugging of backend ajax interfaces. Therefore, this is why I wrote this article.