Modern trends and web applications have dramatically changed the possibilities for developers. There is no doubt that they need some kind of IDE to encode new files and save them for later placement. But what if we just check code snippets? Luckily, there are a lot of different tools for this today!
In this article, we will talk about 15 web applications for online code testing. All of them work on the condition of an Internet connection; some of them offer pro plans for an additional package of properties. Most of them will be useful when trying to find and debug parts of javascript or PHP.
1.Codepad
Created by Steven Hazel, is a unique web application with which you can code syntactic constructs throughout the web. Apart from debugging, Codepad allows its users to copy/paste important parts of codes and share them online.
The output screen displays any error messages related to your code. Using the buttons on the left menu, you can change the language (C/C++, Perl, PHP, Python, Ruby, and more). Codepad is more for software developers who need to collaborate and debug the most problematic programs.
2.Write Code Online
The main website will redirect you to their Java Script editor. You can choose between JS, PHP and basic URL encoding. The application is not only safe and reliable, but also quite easy to use.
Interestingly, you will see the results of the work right under the text field. So if you click "run code" the result will be displayed on the screen. Debugging large PHP scripts can be tricky because it requires other files to be included.
Nevertheless, the application will provide you with indispensable assistance in testing the strength of a new idea.
3.Tinkerbin
I can easily call my favorite online resource for code editing. It supports HTML5/CSS3/JS and displays the result directly on the screen. The application is still in alpha development, but most of the tools work fine and quickly find errors in programs.
The rendering engine supports languages such as Coffeescript and Sass within CSS. They boast an advanced management system and support for many web design brands that you would prefer to use for further work.
We can not ignore the fact that there are hotkeys for the most popular options. And such functionality is not found in all web applications, not to mention the code editors built into the browser. When you enter new tags, the IDE automatically inserts new lines. Tinkerbin is a front-end tool that should definitely be in your web development toolbox.
4.JS Bin
For beginners, working with the interface can cause some difficulties. To avoid this, they can use . JS Bin offers a large number of libraries to choose from - jQuery, jQuery UI, jQM Prototype, MooTools, etc.
If you are coding different elements, the projects will be saved automatically. In addition, you have the opportunity to download the final result of your work or save the source online. This system is more suited to exporting and saving your code than a regular template.
5.JsFiddle
Everyone who has visited Stack Overflow should know about . Their interface differs from JSBin in that they offer more options.
It also supports libraries such as Prototype and jQuery. Moreover, you can include additional external sources to JS/CSS files in any document you are testing. Incredibly, the application even supports XHP Ajax, where you can pass information from the server to the client's browser window and vice versa.
6.CSSDesk
Moving from scripts to style language and . Everything looks pretty much the same as in the previous tools: the source text is on the left, the final web page is on the right. This web application is great for creating web page templates and testing CSS3 properties.
7.Jsdo.It
Some apps are in Japanese, which makes me think they were created somewhere in Asia. What I like the most about their interface is how they load the files they just created and store them in a project. You can easily store entire web page layouts online and access and edit them from any computer.
8.Google Code Playground
It surprised me how many developers don't know about the existence of . You get full access to their API, and in the same window you can debug all your codes.
When I talk about APIs, I mean that you can get data from Google's biggest products: Blogger posts, Google Maps landmarks, and even YouTube videos. When you click on different options, the data in the preview window is also updated.
I would advise you to keep this tool only as a resource, as it will not be suitable for everything that you write. However, Google is a big company with many source code data APIs. If you ever need material from YouTube or the Google search engine, this tool will certainly come in handy.
9.IDEOne
- another tool for "deep" programming and software development. Their online editor supports syntax highlighting for a number of important languages, including Objective-C, Java, C#, VB.NET, SQL, and more. others
10.Viper7 Codepad
This web application, also known as , is located on a site that redirects to the same online editor. Their tools are set up to debug the PHP output variable, which can vary between PHP5 and PHP4 depending on your choice.
By creating an account, Codepad can be used as a personal data storage system. Here, as in other online editors, you can name each PHP project and store it online for free. This code editor is different in that users do not need to install any software on their computer. While interpreting each of the scripts, the editor will suggest additional meta-details such as calling the browser or response headers.
11.JSLint
By itself, a little strange, while the code editor works according to a completely standard scheme.
The options offered may puzzle you if you have not encountered this kind of pattern before. If you have a set of specific skills, you can work with open source . However, many sources don't even support syntax highlighting, which is an oversight with such a wide range of options. I would recommend playing with if you have some free time, but there is no guarantee that it will become your favorite tool for javascript debugging.
12.SQL Fiddle
A little earlier, we looked at a web application called jsFiddle. Now it's time to talk about , which works in the same vein, except for the SQL database syntax. I managed to find a decent alternative for testing the database code.
All output from your SQL code will appear in a table below the editors. You can write new code to apply the data on the right and generate the schema on the left. This database schema is SQL code that you can save to export your current database and re-install everything on a new server.
If you are not familiar with databases or the SQL language, then this application is unlikely to be useful to you. But for developers who are interested in getting familiar with SQL, this tool is perfect!
13.Cloud9 IDE
In my opinion, it is the best source code editor available on the web. This is not just an editor, but a whole system of tools and resources; you can store all your source code repositories on their servers.
Registration is free for all community projects. If you need personal space before development, then it will cost $15 per month or $180 per year. You can share private code repositories with anyone you choose. This option allows developers to collaborate on various projects.
Each new project is stored in a subfolder where actual physical files can be created. HTML, CSS, JS, PHP and everything you need for coding will be in your account. Over time, you will be able to send these files as an entire project or download them to your computer.
The range of possibilities offered by Cloud9 is very wide. I recommend 10-15 minutes to look around in a free account, and you will immediately fall in love with how the UI works. The company continues to gain momentum, so in the next few years I hope to add new useful options.
14.CodeRun
is an online editor for any dynamic web application. The text editor is very similar to Microsoft Visual Studio; you can even code in C# for ASP.NET. Their libraries include third party resources like Facebook Connect and Silverlight.
In addition to Microsoft-based web applications, you can code directly to javascript or PHP. How CodeRun works is not much different from Visual Studio: creating a new website project and working on individual files. At the bottom of the screen are debugging tools and results from the console window.
Indispensable if you have experience with Visual Studio. The interface is almost the same and you can even download/upload project files to your computer. This is another tool that experienced web developers can take note of.
15. Compiler
The template is very similar to the Windows Applications template. You can work with open documents and edit files on the go. However, before you start creating new projects, you will have to register.
Since the layout of the page resembles a regular desktop application, it is easy enough to work even for beginners. The tools support programming techniques such as C++, C#, and Visual Basic. All in all, Compilr should be a fallback application for testing and debugging source code.
Finally
The number of connected computers is growing, making it easier for developers to work together in the browser. New technologies are emerging within local applications, and who knows how far this will go.
I hope the collection of code testing tools in this article made you think about the modern development space. Nowadays, it costs nothing to put together an HTML / CSS web project in a matter of minutes and get a small demo video. Please note that these tools are only there to help you through the process of creating the final product.
3.6 out of 5
Hello everyone!
Today we will see how you can test the performance of your JS code and optimize it accordingly.
A couple of months ago, I wrote an article about, in which we looked at how to use this very console. Today we will use the console.profile() method and see how it can be used to test and then improve scripts.
Sandbox
First, let's create a small HTML document that will contain several elements and the code that we will test.
some text
- Some element with text
We will place the code itself between console.profile() and console.profileEnd() .
Checking for the existence of an element
It often happens that the same scripts are loaded for all pages of the site, respectively, sometimes there may not be the necessary elements. Even though jQuery won't execute code for elements that don't exist, it's still a good idea to check for element existence. Let's consider two variants of the code and pay attention to the time of their execution. The first code does not check:
Console.profile();
$("#mainItem");
console.profileEnd();
As a result of executing this code, we get the following picture in the Firebug console:
The second code checks if there are elements to act on:
Console.profile() ;
var ele = $("#somethingThatisNotHere");
if (ele) (
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();
And outputs this to the console:
As a result, we conclude that it is better to check for the existence of an element - the execution speed will be greater. But this does not mean that you need to check everything in a row: usually, there is the main element of the group, without which all the rest cannot be anyway. That's what needs to be checked.
Effective use of selectors
Most likely you read mine. If not, then read on. There I talked about how browsers parse selectors and which selectors work at what speed. In short, the id selector works the fastest, while the universal ones are the slowest.
So let's do an experiment. I note that the speed of script execution may vary on different computers and browsers.
First, let's try to select elements by class:
Console.profile() ;
$(".selected");
console.profileEnd();
Console.profile() ;
$("li.selected");
console.profileEnd();
Result 0.291ms - reduced by 0.027ms. Now let's refine the selector a little more: the elements we need must be inside the container with id="someList" :
Console.profile() ;
$("#someList .selected");
console.profileEnd();
0.283ms is a slight improvement. Let's refine the selector with the tag name:
Console.profile() ;
$("#someList li.selected");
console.profileEnd();
Got 0.275ms. Now let's select the element directly by id for the sake of interest:
Console.profile() ;
$("#mainItem");
console.profileEnd();
0.165ms is our new record. Now I think it's clear how best to write selectors.
Avoiding redundant operations
Sometimes, in the code there may be constructions like:
// Some code
$(element).doSomething();
// Then more code
$(element).doSomethingElse();
// And more code
$(element).doMoreofSomethingElse();
Never do that. One element is requested over and over again. It's too costly in terms of performance.
Let's take our sandbox and carry out some similar process in it:
Console.profile() ;
$("#mainItem").hide();
$("#mainItem").val("Hi");
$("#mainItem").html("Hello!");
$("#mainItem").show();
console.profileEnd();
The above code can also be chained:
Console.profile();
$("#mainItem").hide().val("Hi").html("Hi!").show();
console.profileEnd();
When using chaining, the element is requested once and then a reference to it is passed to the methods. This reduces the execution time.
You can also cache an element and perform actions on the already cached one:
Console.profile() ;
var elem = $("#mainItem");
elem.hide();
elem.val("Hello");
elem.html("Oh, hey there!");
elem.show();
console.profileEnd();
As you can see from the examples, caching and using action chains reduces the execution time of scripts.
Smart DOM manipulation
As you know, operations with the DOM (Document Object Model), such as getting or inserting elements, are very resource intensive. Let's see how we can speed up these operations.
| 10.07.2015
When working on code, it is very easy to overlook and miss some comma or parenthesis. And re-reading a long non-working code in search of such an error is generally a thankless task. In this case, checking the code with special tool programs can help. Our selection is dedicated to several especially popular validators for the JavaScript language.
« JSLint will hurt your feelings” - such a warning can be seen on the site of the JSLint validator, created in 2002 by Douglas Crockford. And this is true, because very often JSLint finds a lot of errors in absolutely working code. If you want to improve your code and bring it to the ideal state - use this service.
JSHint is a more convenient and customizable and more popular version of the JSLint validator. JSHint is favored by programmers for being able to choose settings and rules for checking code, and comes with good documentation. Easily integrated into editors.
This tool also has a fair number of custom rules, which can have additional customizable options. Various plugins are available. ESLint is easy to understand and has many features not found in other services.
JSCS
The JavaScript Code Style tool differs from the previous ones in that it does not check the code for potential bugs and errors. The task of the JSCS is to check and detect violations in the style of the code. There are many presets and ready-made configurations available to users that you can immediately start using if you stick to the same code style.
Checks html code, either given by a link to the page, or simply as an uploaded file or copied text. Gives a list of comments with recommendations for their correction.
http://validator.w3.org/
css validation (css validator)
Checks for document styles or a style sheet located in a separate file.
http://jigsaw.w3.org/css-validator/
Checking feeds (feed) RSS and Atom
Verifies that RSS and Atom feeds are working properly.
http://validator.w3.org/feed/
Checking spelling on a web page
Highlights errors on the given page URL.
http://webmaster.yandex.ru/spellcheck.xml
Shows errors in text copied into the proof box.
http://api.yandex.ru/speller/
Web page structure check
Shows the structure of a web page. Relevant for checking html5 documents. Incorrect display of Cyrillic characters (:.
http://gsnedders.html5.org/outliner/
Checking content for uniqueness
In the free version, it shows up to 10 pages on the Internet with text that partially matches your page.
http://www.copyscape.com
Checks the uniqueness of the text entered in the form. In the free version, you can wait for the results.
http://www.miratools.ru/Promo.aspx
Checks the uniqueness of both the entered text and the text at the given URL, shows the uniqueness level in percent. It has its own verification algorithm.
http://content-watch.ru
Desktop programs for checking the uniqueness of content from copywriter exchanges. They work for a long time, but with high quality. Etxt has versions for three operating systems: Mac, Linux and Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Shows sites with similar content and similar internal structure.
http://similarsites.com
Website cms check
Checks for features of the most known cms.
http://2ip.ru/cms/
Website usability check for different user groups
Checking accessibility from mobile devices
Assesses the ability to view the page from mobile devices and provides a list of comments and errors.
http://validator.w3.org/mobile/
Checking the convenience of the site for phones from Google.
https://www.google.com/webmasters/tools/mobile-friendly/
Shows the site loading speed on mobile devices.
https://testmysite.withgoogle.com/intl/ru-ru
Website emulator output from a mobile phone. Shows the site through the eyes of the selected model.
http://www.mobilephoneemulator.com/
Checking accessibility for people with disabilities
Page verification service for the visually impaired. Available online and as a plugin for Firefox.
http://wave.webaim.org/
Viewing the content of the site through the eyes of a search robot
Shows site text close to what the search indexer sees.
http://www.seo-browser.com/
The lynx text browser distribution for win32 systems. Before use, you need to edit lynx.bat, specifying the path to the directory with lynx in it.
http://www.fdisk.com/doslynx/lynxport.htm
Removes all markup and shows the page text, meta and title tags, the number of external and internal links. Shows page preview in google.
http://www.browseo.net
Checking the link structure of the site
Checking for broken links
Shows a list of outgoing links for a URL and checks their response. It can check recursively, that is, move from one document to another on its own.
http://validator.w3.org/checklink
Freeware tool for checking broken links. To work, you need to install it on your computer. Recursively crawls the site, makes reports, can be useful for sitemapping.
http://home.snafu.de/tilman/xenulink.html
Checking linking and page titles
Scans up to 500 website pages in the free version. Checks the number of external and internal links. Displays information about scanned pages: nesting, response codes, titles, meta information and titles.
http://www.screamingfrog.co.uk/seo-spider/
Checking the link structure and weight of internal pages
The program scans the site, builds a matrix of internal links, adds external (incoming) links from the given URLs and, based on these data, calculates the internal weights of the site pages. The program can be used to find external (outgoing) links for a list of URLs for pages on a site.
Checking server response codes, site visibility by search robots, site technical characteristics
Checking HTTP headers and server response, page visibility for robots
Checks server response codes, predicts page loading speed depending on the size of the page in bytes of its data, shows the content of the html head tag, internal and external links for the page, the content of the page through the eyes of a search robot.
http://urivalet.com/
Checks server response codes. Allows you to check redirects (response codes 301, 302), Last-Modified header, etc.
http://www.rexswain.com/httpview.html
Shows the amount and content of the data transferred when the page is loaded.
http://www.websiteoptimization.com/services/analyze/
Checks for redirects, the use of the canonical attribute, meta tags, some aspects of site security. Provides recommendations for improving page loading.
http://www.seositecheckup.com
Checking domain and IP address information
WHOIS service of the domain registration center RU center. Gives information on IP addresses and domains around the world. Sometimes freezes.
https://www.nic.ru/whois/?wi=1
Whois service from RosNIIROS (RIPN). Provides information for domains in the RU zone and IP addresses from the RIPE database (Europe).
http://www.ripn.net:8080/nic/whois/
Determines where the domain is hosted and also shows the IP address of the site.
http://www.whoishhostingthis.com
Checking if the IP address is blacklisted for sending email.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Checking MX records for a domain. Checking the SMTP server for the domain. Checking IP in black lists for mailing.
https://mxtoolbox.com/
US registered trademark search.
http://tmsearch.uspto.gov/
Checking robots.txt files
Checks the availability of site pages for indexing by the Yandex robot.
http://webmaster.yandex.ru/robots.xml
Checks the correctness of the robots.txt file.
https://www.websiteplanet.com/webtools/robots-txt
site inspection
Site availability monitoring. Allows you to connect one site for free with minimal verification options.
http://www.siteuptime.com
Website loading speed check. Sends a report by email. It has paid services for monitoring the availability of the site.
http://webo.in
Checking the page loading speed of the site.
http://www.iwebtool.com/speed_test
Checking the indexing and display of the site by search engines
Site visibility in search engines
A service that shows the keywords for the site, for which it is in the TOP 20 (top twenty) of Google results over time. Data about search and advertising traffic.
http://www.semrush.com/
Position in the TOP50 yandex and Google. Title of the site and PR of the main page, presence in important directories, visibility in the top for high-frequency queries.
http://pr-cy.ru/
Checking bans and the level of trust to the site
Website trust check. A service that claims that it measures the trust for Yandex (no one can check anyway :).
http://xtool.ru/
Checking the overlay filters Panda and Penguin from Google. The service allows you to visually determine whether the site crashed on the dates of Panda and Penguin updates.
http://feinternational.com/website-penalty-indicator/
Checking the Page Rank of the site's pages (when copying the URL into the tool, you need to erase the last letter and then write it again).
http://www.prchecker.net/
Checking the history of the site
Shows the history of the development of the site and allows you to see screenshots of old pages.
http://www.archive.org/web/web.php
History of site positions in Google TOP (key phrases, pages, titles), PR indicators, TIC, Alexa Rank, number of backlinks for popular sites.
http://SavedHistory.com
SEO plugins for checking websites
SEO Doctor is an add-on for Firefox. Shows links on the page and provides a convenient interface to various SEO services.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake is an add-on for Firefox. Shows the most important characteristics of the site: TIC, PR, backlinks, Alexa Rank. Works with both Google and Yandex search results. Allows you to quickly analyze competitors.
http://www.seoquake.com/
IEContextHTML is an add-on for Internet Explorer. Checks the indexing of links in Yandex and Google, shows a list of external and internal links, allows you to import data from web pages.
The visibility of the site in search engines depends on the location
An updated list of free proxy servers, including Russian ones.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Anonymous free proxy with the ability to introduce yourself from three countries. Works with Google search.
https://hide.me/en/proxy
Google search emulators in different countries by setting search parameters.
http://searchlatte.com/
http://isearchfrom.com/
Checking positions in Yandex and Google
The service allows a deep check (up to 500) of the position of the site by region in Yandex.
Network analysis of the site, checking backlinks
Backlink Analysis
It analyzes the link mass of the site, forms slices according to various criteria: link type, anchors, pages. Shows the weight of backlinks. The service is available only to registered users.
http://ahrefs.com
Checking for backlinks to the site
Checks for the presence of backlinks to the site in the proposed list of URLs (up to 100 pages).
http://webmasters.ru/tools/tracker
Checking the popularity of a site in social media
PlusOneChecker
Shows the number of likes (plusone) on Google+. You can immediately enter a list of checked URl.
http://www.plusonechecker.net/
Facebook Graph API Explorer
SharedCount
Shows popularity on Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com
cool social
Shows the popularity of the first page of the site on Twitter, Google+, Facebook, Delicious, StumbleUpon. For Russian sites, the data is sometimes incorrect.
http://www.coolsocial.net
social popularity
Social Crawlytics
Scans the site and generates "Shares" reports of the main foreign social networks for these pages. Registers users through a twitter account. Reports can be seen the very next day.
https://socialcrawlytics.com
Checking the site for viruses
Dr. Web
Checks the specified URL for suspicious code, shows loaded scripts and the results of their check.
http://vms.drweb.com/online/
VirusTotal
Checks URLs for viruses with 30 scanners.
https://www.virustotal.com/#url
Alarmer
Site protection system from viruses. Scans site files daily and sends a report on their changes by email.
No matter how strange it may seem, but there are still users who disable JavaScript. And most webmasters they just "slaughter" them, however, sometimes you want to give advice so that user has JavaScript enabled. And here's how to do check: "JavaScript is enabled", and if not, then display a line asking you to turn it on, I will tell you in this article.
The code below must be placed inside the tag body:
Let me explain this code a bit. If the user has JavaScript enabled, then the method write() will work and output a string. If JavaScript disabled, then the whole tag script will be ignored. However, it goes further noscript tag. This tag contains elements that will be shown by the browser, if JavaScript disabled. That is the content of the noscript tag is shown when JavaScript is disabled, and when enabled, the user noscript does not see.
In such a simple way, Webmasters often write: Please enable JavaScript", or display some beautiful pictures with a similar request, or something else, because inside noscript tag you can put any HTML tags. And now you can apply the acquired knowledge on your site, because it's no secret that now it's not so easy to find a site that would not use JavaScript.
