6 online debugging environments for web development
Today’s webpage code generally consists of three parts:
* HTML, semantic layer, provides web content.
* CSS, presentation layer, specifies the appearance of web pages.
* Javascript, the action layer, defines the interaction between the user and the web page.
An ideal development environment should be able to debug these three types of code separately, and easily view the overall effect of combining them.
The browser is the most suitable tool for viewing effects, so many people think that the code debugging environment can also be directly deployed in the browser to provide services in the form of a website.
Below, I will summarize the 6 most common online debugging environments for web development based on Design Shack ‘s article. They greatly facilitate the work of web designers and greatly improve work efficiency.
One, CSSDesk
Website: http://cssdesk.com/ (need to overturn the wall)
This website is one of the earliest online debugging environments, mainly used for debugging CSS.
In the two panels on the left, you can enter html and css code respectively, but Javascript debugging is not supported.
You can change the background color of the “Preview Area”, and you can save or download the completed code for debugging.
Two, Dabblet
Website: http://dabblet.com/
Dabblet is also a CSS debugging environment and does not support Javascript debugging.
It divides the web page effect into three panels, “CSS effect”, “HTML effect” and “overall effect”, which is convenient for independent debugging.
It has two biggest features, one is the dynamic display of code effects, the effect is automatically displayed as soon as the code is entered; the second is to display CSS prompts, such as the font effect and length effect in the above picture.
Three, JS Bin
This is an earlier Javascript online debugging environment.
It is divided into three areas: Javascript, html, and “effect preview”. You can check which areas to display by yourself. It does not have a separate CSS code area, CSS code must be embedded in html code, which is very inconvenient.
It supports loading commonly used Javascript libraries. In addition, there are not many other features.
Four, jsFiddle
URL: http://jsfiddle.net/
jsFiddle is currently the most popular online debugging environment.
Its default interface is divided into 5 areas, the left side is the parameter setting, and the right side is followed by HTML, Javascript, CSS and “effect preview area”.
In addition to loading common Javascript libraries, it also supports SCSS code and CoffeeScript code. You can even embed its window into your own web page.
Five, Tinkerbin
Website: http://tinkerbin.com/
Tinkerbin is very similar to jsFiddle, but is also divided into HTML, Javascript, CSS and “effect preview area”.
Its characteristic is that you can select a certain code to monopolize the entire editing area, thus increasing the visual space for code editing. In addition, it can display the results of code execution in real time, which is not supported by jsFiddle.
It supports quite a few types of codes, such as HAML, SCSS, LESS and CoffeeScript.
Six, Rendur
URL: http://rendur.com/
Rendur is a lightweight online debugging environment with few functions, but it loads and runs quickly.
The user can switch between the HTML, CSS, and Javascript three panels and enter the corresponding code. The running result of the code will be automatically displayed on the background webpage. The last panel shows the source code of the entire web page.
(over)