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.
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.
Website: http://cssdesk.com/ (need to overturn the wall)
This website is one of the earliest online debugging environments, mainly used for debugging CSS.
You can change the background color of the “Preview Area”, and you can save or download the completed code for 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
jsFiddle is currently the most popular online debugging environment.
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.
Rendur is a lightweight online debugging environment with few functions, but it loads and runs quickly.