Front-end technology-development debugging tools, technology-development debugging tools

Front-end technology-development debugging tools, technology-development debugging tools
Page creation-Development and debugging tools (1) Introduction to development tools

There are two types of development tools: Text Editor and integrated development environment (IDE)

Common text editors:Sublime Text, Notepad ++, EditPlus, etc.
Commonly used IDE:WebStorm, Intellij IDEA, Eclipce, etc.

Here we will mainly introduce how to use the Sublime Text editor, which basically meets our requirements for front-end development tools.

I. Features of Sublime Text:

Cross-platform, Fast startup
Multi-row Selection
Various practical plug-ins
Snippets
Support for VIM compatibility mode

Sublime Text get address: http://www.sublimetext.com/

2. Common plug-ins

Package Control:Install Package Control before installing other plug-ins.
Emment:The Web Developer Toolkit can greatly improve the workflow of HTML and CSS.
SublimeCodeIntel:Code prompt
DocBlocker:Annotate js Code
JSFormat:Format js Code
Terminal:Use the vim command

2.1 Package Control

Install Package Control before installing other plug-ins. The steps are as follows:

Use the Ctrl + 'shortcut or open the command line from the View-> Show Console menu,

Sublime text3Paste the following code:

import urllib.request,os; pf = 'PackageControl.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener(urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf),'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace('','%20')).read())

Sublime text2Paste the following code:

import urllib2,os; pf='PackageControl.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs(ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf),'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( '','%20' )).read()); print( 'Please restart Sublime Text to finishinstallation')

If yes, you can view the Package Settings and Package Control Menus under the Preferences menu.

You may not be able to install Package by using code for various reasons. Follow these steps to manually install Package Control:

A.Package Control: http://files.cnblogs.com/files/jingwhale/PackageControl.zip
B.Click the Preferences> BrowsePackages menu.
C.Enter the upper directory of the opened directory, and then enter the Installed Packages/directory
D.Download Package Control. sublime-package and copy it to the Installed Packages/directory.
E.Restart SublimeText.

2.2 Emment

Emment is a Web Developer toolkit that can greatly improve the workflow of HTML and CSS.

Basically, most text editors allow you to store and reuse some code blocks, which are called "fragments ". Although fragments can boost your productivity, most implementations have the disadvantage that you must first define your code snippets and cannot expand at runtime. Emmet raised the fragment concept to a new level: You can set CSS expressions that can be dynamically parsed, and then get the corresponding content based on the abbreviations you enter. Emmet is a mature front-end developer who is very suitable for compiling HTML/XML and CSS code, but it can also be used in programming languages.

<Link rel = "stylesheet" href = "style.css">

Introduce the internal style sheet: style + tab

<style></style>

Introduce external js files: script: src + tab

<script src=""></script>

Introduce internal js files: script + tab

<script></script>

Add website icon: link: favicon + tab

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

Set the character encoding: meta: utf + tab

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Set compatibility mode meta: compat + tab

<meta http-equiv="X-UA-Compatible" content="IE=7">

The demo is as follows:

Width: 100px;

Height: 10%; margin: 5em;

Organization Alias List:P%,EEm,XEx

2). Additional attributes

@ F +

Overflow: hidden;

-Webkit-transform:;-moz-transform:;-ms-transform:;-o-transform :;

Background-image:-webkit-linear-gradient (left, # fff 50%, #000); background-image:-o-linear-gradient (left, # fff 50%, #000); background-image: linear-gradient (to right, # fff 50%, #000 );2.3 common Shortcut Keys 1) and command board (Ctrl + Shift + p)

Frequently used: when creating a new file (to save the file), set the context of the file: press Ctrl + Shift + p to call up the command board, type sshtml to set the html context sshtml, type sscss to set the css context, and type ssjs to set the js context, so that the code in the context is highlighted and prompted.

2) Search (Ctrl + p)

: Number of queried rowsFor example: 300, search for 300 rows
@ Locate functions in jsThe selector in css, such as @ show. Locate the show method in the js file.
# Search for keywords, Such as: # this, find this

3) move the cursor to the img or background-image label and press ctrl + u. Emmet will automatically read the image size and add it. 4) Select multiple rows

Select a keyword and pressCtrl + d, You can select multiple identical keywords (add one each time), as shown below:

5) the shortcut keys for editing are ctrl + alt + left and ctrl + alt + right. 6) quickly remove unnecessary matching start and close tags. Shortcut: ctrl + k.

In some large HTML code, sometimes there are too many tags nested, And the tag is removed through Emmet.

7) The numbers increase/decrease. The values can be increased or decreased by 0.1, 1, and 10.

The shortcut keys are:Alt + up/down, ctrl + up/down, and alt + shift + up/down.

8) Move the code up and down, ctrl + shift + alt + up/down9), and calculate the expression.

With Emmet, you can perform simple numeric operations in HTML and CSS files. The magic is that you can pressCtrl + shift + yEmmet can give the final result.

2.4 DocBlocker

Install

A,Use the shortcut key combination ctrl + shift + P to call out the Command Panel
B,Enter "install package" in the panel and press Enter.
C,Enter "DocBlocker" and wait until the installation is complete.

Use

At the top of the function to be annotated, press '/**' + tab to comment out the code.

<Snippet> <content> <! [CDATA [Hello, $ {1: this} is a $ {2: snippet}.]> </content> <! -- Optional: Set a tabTrigger to define how to trigger the snippet --> <! -- <TabTrigger> hello </tabTrigger> --> <! -- Optional: Set a scope to limit where the snippet will trigger --> <! -- <Scope> source. python </scope> --> </snippet>

To simplify the above Code:

<snippet>    <content><![CDATA[Type your snippet here]]></content>    <!-- Optional: Tab trigger to activate the snippet -->    <tabTrigger>hello</tabTrigger>    <!-- Optional: Scope the tab trigger will be active in -->    <scope>source.python</scope>    <!-- Optional: Description to show in the menu -->    <description>My Fancy Snippet</description></snippet>

This section briefly introduces the four parts of snippet:

Content: it must contain <! [CDATA […]>,Otherwise it will not work. Type your snippet here is used to write your own code snippet
TabTrigger: a character or string used to trigger a code snippet.For example, in the preceding example, input hello in the editing window and press tab to outputType your snippet here code snippet
Scope: indicates that your code snippet will be activated in that language environment.For example, the above Code defines source. python, which means that the code snippet will be activated in the python environment.
Description: displays the description of the code snippet.If this parameter is not specified, the file name of the code snippet is used as the description by default.

Commonly used scope (language source, label text ):

HTML: text.html
CSS: source.css
Javascript: source.js
JSON: source.json
SASS: source.sass
XML: text.xml
Markdown: text.html.markdown
Ruby: source.ruby
PHP: source.php
Latex: text.tex.latex
Java: source.java
JSP: text.html.jsp

3.2 modify the new file as follows:

<snippet>    <content><![CDATA[<div>hello world!</div>]]></content>    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->    <tabTrigger>hello</tabTrigger>    <!-- Optional: Set a scope to limit where the snippet will trigger -->    <scope>text.html</scope></snippet>

3.3 enter hello in html and press enter to display the following:

<div>hello world!</div>

Http://getf5.com/

4.1 decompress, open f5.exe, and open the default browser automatically

The original author and original blog address must be indicated.