Section one: JavaScript Encoding and debugging

First, preface

工欲善其事, its prerequisite. Between the thing and the device is corresponding, what to do with what tool, which is to be fastidious.

For JavaScript (not just JavaScript, of course), I think it would be better to differentiate between the tools of learning and the tools of production. In production, everything is aimed at productivity, and using a powerful IDE is not the only option. and learning, automation is too high tools, but will hinder your learning. Of course, if you are a skilled engineer, you can not consider these problems.

My habit is that when it comes to learning a new technology, or another language, I like to work with manual code, using a simple, handy text editor like EditPlus to write code, and compiling it manually using the command line, which gives me insight into the essence of language or technology and more detail. Then, I will find a representative open source project, using the IDE to analyze its source code, so as to understand how the language or technology in the production environment to solve the actual problem.

Second, the Coding tool

As long as it is a tool for editing text, it can be encoded in JavaScript. However, considering the performance, efficiency, and convenience, we use more editplus, UltraEdit, EmEditor, notepad++, Sublime Text, and Webstorm, Visual studio and so on. The latter two are professional ides and belong to the heavyweight development tool.

EditPlus Small and convenient, powerful, use is very handy. You typically organize and manage project files through a catalog.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/bf7ba1be-5017-4e82-8f0f-dec5ce2c6116.png "name= "bf7ba1be-5017-4e82-8f0f-dec5ce2c6116" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

However, editplus default use of IE browser, and is a "seamless browser", open browser page, also in the editplus of a sub-document page, the browser can not use the "developer Tools" for complex JS code debugging is very inconvenient. You can modify your browser's configuration by using the preferences settings.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/e29604d4-f492-4741-8be1-15ff08ff0378.png "name= "e29604d4-f492-4741-8be1-15ff08ff0378" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

In this way, you can open an external browser when browsing the Web page and press F12 to debug.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/df179664-7ff8-4964-83c1-e701feddf060.png "name= "df179664-7ff8-4964-83c1-e701feddf060" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/284e1eaf-8c5c-4618-98c5-225396a247c6.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

EditPlus is a fee software, if you are not willing to pay to register, you can use notepad++. Notepad++ can use Project management projects.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/d266bcef-a56c-4ca4-848b-ad566d994aba.png "name= "D266bcef-a56c-4ca4-848b-ad566d994aba" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/32f6f5d5-6657-4e19-81fd-dc74ec3843a2.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

You can then "add files from a directory" to add your project files to the project for easy administration.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/641b25fa-681e-440d-bba3-b3fabb80b7e3.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Of course, don't forget to save the workspace.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/1f905f11-a327-419e-adc7-6bded808a393.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

You can use the shortcut keys to open the browser browsing page, debugging programs. You can modify the shortcut keys to run the browser to suit your personal habits.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/b74ffa1c-9064-4ca9-b112-346f94187a97.png "name= "B74ffa1c-9064-4ca9-b112-346f94187a97" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/c166c398-c28a-4074-837c-199f00bae3f4.png "name= "C166c398-c28a-4074-837c-199f00bae3f4" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Sublime text is a powerful code editor that is paid for software, but can be tried indefinitely. Sublime text can be extended through plugins, enhanced features, so powerful, and very fun, by programmers love. There are two main ways to install a plugin.

Installation method one: Direct installation.

You can download the plugin installation package directly and unzip it to the packages directory. The packages directory can be viewed through the menu->preferences->browse packages.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/fff2ce12-2433-4c24-ba22-068f9abe87dc.png "name= "FFF2CE12-2433-4C24-BA22-068F9ABE87DC" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/71cfec65-1017-4d63-8554-500881e47f6d.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Installation method Two: Install using the Package control component.

From the menu->perferences->package control, bring up the install package and select the plug-in you want to install in the list.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/1dd3a3f8-a941-4677-9695-d07840df3bd5.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/733a61e5-f53c-4b10-8c02-afa78c4370da.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/5de820bf-28e4-49bb-82a0-216b0f7ad003.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

For example, we hope that in the sublime text work environment can open the browser directly to see the effect of the Web page debugging, you can install a very useful right-click menu Enhancement Plugin sidebarenhancements. The right-click menu function in the folders bar on the left side of sublime text is enhanced.

The plugin also allows us to customize the shortcut settings using which browser, click on the menu bar preferences->package setting->side bar->key Building-user, set.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/b4fb9a1c-f1cc-4090-a544-fbced8cb8ed7.png "name= "B4fb9a1c-f1cc-4090-a544-fbced8cb8ed7" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/0a5db663-7e2e-4fce-8393-0d7de4eb9003.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

This way, you can open the browser to view the Web page directly via the right-click menu or by using the shortcut key.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/121f4216-b686-4863-9012-9c1b668056f6.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Install the Sublimetmpl plugin to quickly generate file templates, such as shortcut keys "ctrl+alt+h" to generate HTML file templates.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/35a00802-829e-4442-a4ef-6298d3e33c14.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Installs the better completion plugin, supports JavaScript, JQuery, Twitter bootstrap frame, HTML5 Tag property hints.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/ab527430-f741-499c-815a-934e8df9ebb5/11.gif " Name= "Ab527430-f741-499c-815a-934e8df9ebb5" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px; Border:0px;height:auto; "/>

Note the configuration file, which first copies the configuration contents from the Preferences->package setting->sublime better completion->settings-default to preferences- >package setting->sublime better Completion->settings-user, and then make modifications.

For example, to enable jquery AutoComplete now, modify "jquery": false, "for" "jquery": true, ".

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/c2558a1a-d97e-426e-9146-9b818b108520.png "name= "c2558a1a-d97e-426e-9146-9b818b108520" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

With configuration, you can run JavaScript within sublime text without having to open an external browser for browsing and debugging to see how the code works.

First step: Install node. js

After installation, see if the NODEJS environment variable is configured.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/c780b036-7ee5-455a-b443-6b8b3cc4fe05.png "name= "C780b036-7ee5-455a-b443-6b8b3cc4fe05" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Then, on the command line, enter the node command to test it.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/8002bdea-9cb0-4ec4-97c1-d55e09fd6c48.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Step Two: Add the build system

Click menu Tools, build system, New build system, enter the configuration information and save it.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/f8116cf0-b976-4941-af93-1c5f95870fc1.png "name= "F8116cf0-b976-4941-af93-1c5f95870fc1" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/a501a8eb-c85e-456a-8dbd-7237b32c8445.png "name= "a501a8eb-c85e-456a-8dbd-7237b32c8445" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/f4cfb522-c2ef-4481-b6c8-4fbcd6372bae.png "name= "F4cfb522-c2ef-4481-b6c8-4fbcd6372bae" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

JavaScript can then be run directly within the sublime text.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/aa5fb512-1ada-4e68-8926-43ae817c3922.png "name= "aa5fb512-1ada-4e68-8926-43ae817c3922" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Third, code debugging

No one can write code overnight. Verify ideas, track bugs, resolve errors, and debug the whole process along with our coding. Good debugging methods and tools can greatly improve our coding efficiency.

We typically run our code in a browser, and we can verify that the output is consistent with what we expected by prompting information such as the alert statement and the Console.log statement. You can also use F12 to bring up the browser's developer tools, to debug the code breakpoints.

For example, there is a function sayhello, we want to debug it.

function SayHello (name) {

var msg = "Hello," +name;

Console.log (msg);

}

We wrote two files with EditPlus.

Test.js

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/beb3f27a-99c4-4fb5-a750-64187908e221.png "name= "beb3f27a-99c4-4fb5-a750-64187908e221" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Test.html

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/5ce6e482-48b7-435c-8f75-fd8a8cb15696.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

According to the above, we can set EditPlus to call the external browser to open the HTML page, and through the shortcut key F12 to bring up the browser developer tools, refresh the page, we see the program output results in the console.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/3f935de9-dc4b-4381-b191-0b8243ef315d.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

You can click "Source" to view the source code, and click on the mouse to add a breakpoint, refresh the page to reload the page, you can debug the breakpoint.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/66fb6d26-3fda-42fc-80c4-6cdffe492407.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Of course, the powerful IDE, which integrates coding and debugging, is convenient to use. Convenience comes at a cost, and these tools increase efficiency for your production and you'll have to hand over your money. Webstorm, Visual Studio, and so on, is such a tool. Here is the most powerful, most convenient visual Studio, other tools that you can choose to learn and use according to your preferences.

Create a Web site project first. For simplicity, we create an empty project and then copy the two files to the project.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/28719b13-4e10-4089-8f20-6587b527821d.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

This time we add the breakpoint directly to the page.

650) this.width=650; "Src=" Https://app.yinxiang.com/shard/s38/res/077392c2-c804-4b55-85ee-51455fd909ff.png "class = "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px;height:auto;"/>

Run the program, it will stop at the breakpoint place.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/db3f9b7d-85b9-4e4a-a6d5-ff0ce9109b1d.png "name= "db3f9b7d-85b9-4e4a-a6d5-ff0ce9109b1d" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Step through the process to see the results of the program running.

650) this.width=650; "src=" Https://app.yinxiang.com/shard/s38/res/c623a7e9-d561-40a4-bfbc-503835d71330.png "name= "c623a7e9-d561-40a4-bfbc-503835d71330" class= "En-media" style= "Margin:.857412em 0px 1.286em;padding:0px;border:0px ; height:auto; "/>

Iv. Summary

JavaScript, which is a scripting language designed for Web browsers, has been widely used in a variety of software applications in recent years. There is not only JavaScript code running on the server, but also JavaScript code to drive iOS and Android apps, and even some to control the robot. So what kind of tools to use, according to their own work scene and needs, choose the right tool.

This article from "Old Hui" blog, reproduced please contact the author!

Section one: JavaScript Encoding and debugging