Jak testovat a optimalizovat JS skripty. Kontrola přístupnosti pro osoby se zdravotním postižením

3,6 z 5

Ahoj všichni!

Dnes se podíváme na to, jak můžete otestovat výkon svého JS kódu a podle toho jej optimalizovat.

Před pár měsíci jsem psal o článku, ve kterém jsme se podívali na to, jak používat právě tuto konzoli. Dnes použijeme metodu console.profile() a podíváme se, jak ji lze použít k testování a následnému vylepšování skriptů.

Nejprve si vytvořte malý HTML dokument, který bude obsahovat několik prvků a kód, který budeme testovat.

Testování výkonu JS skriptů

Nějaký text

• Nějaký prvek s textem

Samotný kód bude umístěn mezi console.profile() a console.profileEnd() .

Často se stává, že jsou načteny stejné skripty pro všechny stránky webu, takže někdy nemusí být přítomny potřebné prvky. I když jQuery nespustí kód pro neexistující prvky, je stále lepší zkontrolovat existenci prvků. Podívejme se na dvě možnosti kódu a věnujte pozornost době jejich provádění. První kód neprovádí kontrolu:

Console.profile();


$("#hlavníPoložka");
console.profileEnd();

V důsledku spuštění tohoto kódu dostaneme v konzole Firebug tento obrázek:

Druhý kód zkontroluje, zda existují prvky, na kterých je třeba akci provést:

Console.profile() ;
var ele = $("#něco, co není tady");
if (ele) (
ele.text("Nějaký text").slideUp(300).addClass("úpravy");
}
$("#hlavníPoložka");
console.profileEnd();

A vypíše to do konzole:

V důsledku toho docházíme k závěru, že je lepší zkontrolovat existenci prvku - rychlost provádění bude větší. To ale neznamená, že je potřeba vše kontrolovat: obvykle existuje hlavní prvek skupiny, bez kterého všechny ostatní stejně nemohou existovat. To je potřeba zkontrolovat.

S největší pravděpodobností jste četli můj. Pokud ne, tak si to přečtěte. Tam jsem mluvil o tom, jak prohlížeče analyzují selektory a které selektory fungují jakou rychlostí. Zkrátka id selector funguje nejrychleji a ty univerzální nejpomaleji.

Udělejme tedy experiment. Vezměte prosím na vědomí, že rychlost provádění skriptu se může lišit různé počítače a prohlížeče.

Nejprve zkusme vybrat prvky podle třídy:

Console.profile() ;
$(".vybrané");
console.profileEnd();

Console.profile() ;
$("li.selected");
console.profileEnd();

Výsledek 0,291 ms - sníženo o 0,027 ms. Nyní si selektor trochu více ujasníme: prvky, které potřebujeme, musí být uvnitř kontejneru s id="someList" :

Console.profile() ;
$("#someList .selected");
console.profileEnd();

0,283 ms je mírné zlepšení. Vyjasněme selektor s názvem tagu:

Console.profile() ;
$("#someList li.selected");
console.profileEnd();

Máme 0,275 ms. Nyní vybereme prvek přímo podle id jen pro zábavu:

Console.profile() ;
$("#hlavníPoložka");
console.profileEnd();

0,165 ms je náš nový rekord. Nyní si myslím, že je jasné, jak nejlépe napsat selektory.

Někdy může kód obsahovat konstrukce jako:

// Nějaký kód
$(element).doSomething();

// Pak další kód
$(element).doSomethingElse();

// A další kód
$(element).doMoreofSomethingElse();

Nikdy to nedělej. Jedna položka je požadována znovu a znovu. To je z hlediska výkonu příliš drahé.

Vezměme náš sandbox a provedeme v něm podobný proces:

Console.profile() ;
$("#hlavníPoložka").hide();
$("#hlavníPoložka").val("Dobrý den");
$("#mainItem").html("Ahoj!");
$("#hlavníPoložka").show();
console.profileEnd();

Výše uvedený kód lze také provést jako řetězec:

Console.profile();
$("#mainItem").hide().val("Ahoj").html("Ahoj!").show();
console.profileEnd();

Při použití řetězce je prvek vyžádán jednou a poté je do metod předán odkaz na něj. Tím se zkracuje doba provádění.

Můžete také ukládat prvek do mezipaměti a provádět s ním akce:

Console.profile() ;
var elem = $("#hlavníPoložka");
elem.hide();
elem.val("Dobrý den");
elem.html("Ahoj!");
elem.show();
console.profileEnd();

Jak můžete vidět z příkladů, ukládání do mezipaměti a použití řetězců akcí zkracuje dobu provádění skriptu.

Je známo, že operace DOM (Document Object Model), jako je získávání nebo vkládání prvků, jsou velmi náročné na zdroje. Podívejme se, jak můžeme tyto operace urychlit.

Bez ohledu na to, jak divně se to může zdát, stále existují uživatelé, kteří JavaScript deaktivují. A většina webmasterů je prostě ignoruje, ale někdy chcete poradit, aby uživatel mohl povolit JavaScript. A zde je návod, jak zkontrolovat: „Je JavaScript povolen?“, a pokud ne, zobrazte řádek s žádostí o jeho povolení, řeknu vám v tomto článku.

Níže uvedený kód musí být umístěn uvnitř značky body:

document.write("Máte povolený JavaScript!");

Máte vypnutý JavaScript...

Dovolte mi tento kód trochu vysvětlit. Pokud má uživatel povolený JavaScript, metoda write() bude fungovat a vytiskne řetězec. Pokud je JavaScript zakázán, bude celá značka skriptu ignorována. Dále však přichází značka noscript. Tato značka obsahuje prvky, které prohlížeč zobrazí, pokud je zakázán JavaScript. To znamená, že obsah značky noscript se zobrazí, když je JavaScript zakázán, ale když je povolen, uživatel nevidí noscript.

Webmasteři často píší tímto jednoduchým způsobem: " Povolte prosím JavaScript", nebo zobrazují nějaké krásné obrázky s podobným požadavkem, nebo něco jiného, ​​protože do značky noscript můžete umístit libovolné HTML značky. A nyní můžete nabyté znalosti aplikovat na svůj web, protože není žádným tajemstvím, že teď je všechno špatně Je snadné najít web, který vůbec nepoužívá JavaScript.

Kontroly html kód, buď specifikovaný prostřednictvím odkazu na stránku, nebo jednoduše jako nahraný soubor nebo zkopírovaný text. Poskytuje seznam připomínek s doporučeními pro jejich opravu.
http://validator.w3.org/

Kontroluje styly dokumentu nebo šablonu stylů umístěnou v samostatném souboru.
http://jigsaw.w3.org/css-validator/

Kontroluje, zda kanály RSS a Atom fungují správně.
http://validator.w3.org/feed/

Zvýrazňuje chyby na daném místě URL stránek E.
http://webmaster.yandex.ru/spellcheck.xml

Zobrazuje chyby v textu zkopírovaném do ověřovacího okna.
http://api.yandex.ru/speller/

Zobrazuje strukturu webové stránky. Relevantní pro kontrolu dokumentů HTML5. Azbuka se nezobrazuje správně (:.
http://gsnedders.html5.org/outliner/

V bezplatná verze zobrazí až 10 stránek na internetu s částečnou shodou textu s vaší stránkou.
http://www.copyscape.com

Kontroluje jedinečnost textu zadaného do formuláře. V bezplatné verzi můžete čekat na výsledky.
http://www.miratools.ru/Promo.aspx

Kontroluje jedinečnost jak zadaného textu, tak textu na dané URL, ukazuje míru jedinečnosti v procentech. Má svůj vlastní ověřovací algoritmus.
http://content-watch.ru

Desktopové programy pro kontrolu jedinečnosti obsahu z copywritingových výměn. Fungují dlouho, ale kvalitně. Etxt má verze pro tři operační systémy: Mac, Linux a Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/

Zobrazuje stránky s podobným obsahem a podobnou vnitřní strukturou.
http://similarsites.com

Kontroluje známky nejznámějších cms.
http://2ip.ru/cms/

Vyhodnotí možnost zobrazení stránky z mobilních zařízení a zobrazí seznam komentářů a chyb.
http://validator.w3.org/mobile/

Kontrola použitelnosti webu pro telefony Google.
https://www.google.com/webmasters/tools/mobile-friendly/

Ukazuje rychlost načítání stránek na mobilních zařízeních.
https://testmysite.withgoogle.com/intl/ru-ru

Ukončete web emulátoru pomocí mobilní telefon. Zobrazuje web očima vybraného modelu.
http://www.mobilephoneemulator.com/

Služba ověřování stránek pro zrakově postižené. K dispozici online a jako plugin pro Firefox.
http://wave.webaim.org/

Zobrazuje text webu blízko tomu, co vidí indexátor vyhledávání.
http://www.seo-browser.com/

Distribuce textového prohlížeče Lynx pro systémy win32. Před použitím je třeba upravit lynx.bat a uvést v něm cestu k adresáři s lynx.
http://www.fdisk.com/doslynx/lynxport.htm

Odstraní všechna označení a zobrazí text stránky, meta tagy a tagy titulků, počet externích a interních odkazů. Zobrazí náhled stránky na Googlu.
http://www.browseo.net

Zobrazuje seznam odchozích odkazů pro adresu URL a kontroluje jejich odezvu. Může kontrolovat rekurzivně, to znamená nezávisle přecházet z jednoho dokumentu do druhého.
http://validator.w3.org/checklink

Freeware nástroj pro kontrolu nefunkčních odkazů. Chcete-li pracovat, musíte jej nainstalovat do počítače. Rekurzivně skenuje web, vytváří zprávy, může být užitečné pro vytváření mapy webu.
http://home.snafu.de/tilman/xenulink.html

Skenuje až 500 webových stránek v bezplatné verzi. Kontroluje počet externích a interních odkazů. Zobrazuje informace o naskenovaných stránkách: vnoření, kódy odpovědí, názvy, metainformace a nadpisy.
http://www.screamingfrog.co.uk/seo-spider/

Program prohledá web, sestaví matici interních odkazů, přidá externí (příchozí) odkazy z daných URL a na základě těchto údajů vypočítá vnitřní váhy stránek webu. Program lze použít k vyhledání externích (odchozích) odkazů na seznam adres URL webových stránek.

Kontroluje kódy odpovědí serveru, předpovídá rychlost načítání stránky v závislosti na velikosti jejích dat v bajtech, zobrazuje obsah html tag hlava, vnitřní a externí odkazy pro stránku obsah stránky očima vyhledávacího robota.
http://urivalet.com/

Kontroluje kódy odpovědí serveru. Umožňuje kontrolovat přesměrování (kódy odpovědí 301, 302), hlavičku Last-Modified atd.
http://www.rexswain.com/httpview.html

Zobrazuje objem a obsah přenesených dat při načtení stránky.
http://www.websiteoptimization.com/services/analyze/

Kontroluje přesměrování, použití kanonického atributu, meta tagy a některé aspekty zabezpečení webu. Poskytuje doporučení pro zlepšení načítání stránky.
http://www.seositecheckup.com

Služba WHOIS centra registrace domén centra RU. Poskytuje informace o IP adresách a doménách po celém světě. Někdy to zamrzí.
https://www.nic.ru/whois/?wi=1

Služba Whois od RosNIIROS (RIPN). Poskytuje informace pro domény v zóně RU a IP adresy z databáze RIPE (Evropa).
http://www.ripn.net:8080/nic/whois/

Určuje, kde je doména hostována, a také zobrazuje IP adresu webu.
http://www.whoihostingthis.com

Kontrola, zda je IP adresa zahrnuta na černé listině pro odesílání e-mailů.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/

Kontrola MX záznamů pro doménu. Zkouška SMTP servery pro doménu. Kontrola IP v mailing listech.
https://mxtoolbox.com/

Prohledejte databázi registrovaných ochranných známek v USA.
http://tmsearch.uspto.gov/

Kontroluje dostupnost stránek webu pro indexování robotem Yandex.
http://webmaster.yandex.ru/robots.xml

Kontroluje správnost souboru robots.txt.
https://www.websiteplanet.com/webtools/robots-txt

Sledování dostupnosti stránek. Umožňuje zdarma připojit jeden web s minimálními možnostmi ověření.
http://www.siteuptime.com

Kontrola rychlosti načítání stránek. Odešle zprávu e-mailem. Má to placené služby sledování dostupnosti místa.
http://webo.in

Kontrola rychlosti načítání webových stránek.
http://www.iwebtool.com/speed_test

Zobrazení služby klíčová slova pro web, pro který je v průběhu času v TOP 20 (prvních dvacet) výsledků Google. Údaje o návštěvnosti z vyhledávání a reklamy.
http://www.semrush.com/

Pozice v TOP50 Yandex a Google. Webové stránky prsa a PR domovská stránka, přítomnost v důležitých adresářích, viditelnost v horní části pro RF dotazy.
http://pr-cy.ru/

Kontrola důvěryhodnosti webu. Služba, která tvrdí, že měří důvěru pro Yandex (stejně to nikdo nemůže zkontrolovat :).
http://xtool.ru/

Kontrola překrytí filtrů Panda a Penguin od Googlu. Služba vám umožňuje vizuálně určit, zda došlo k selhání webu v datech aktualizací Panda a Penguin.
http://feinternational.com/website-penalty-indicator/

Kontrola Page Rank stránek webu (při kopírování adresy URL do nástroje je třeba vymazat poslední písmeno a poté jej napsat znovu).
http://www.prchecker.net/

Zobrazuje historii vývoje webu a umožňuje prohlížet snímky starých stránek.
http://www.archive.org/web/web.php

Historie pozic stránek v TOP Google (klíčové fráze, stránky, nadpisy), PR indikátory, TIC, Alexa Rank, čísla zpětné odkazy pro oblíbené stránky.
http://SavedHistory.com

SEO Doctor je doplněk pro Firefox. Zobrazuje odkazy na stránce a poskytuje pohodlné rozhraní pro různé služby SEO.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake je doplněk pro Firefox. Ukazuje nejdůležitější vlastnosti webu: TIC, PR, zpětné odkazy, Alexa Rank. Funguje s výsledky Google i Yandex. Poskytuje schopnost rychle analyzovat konkurenty.
http://www.seoquake.com/

IEContextHTML - doplněk k internet Explorer. Kontroluje indexování odkazů v Yandex a Google, zobrazuje seznam externích a interních odkazů a umožňuje importovat data z webových stránek.

Aktualizovaný seznam bezplatných proxy serverů, včetně ruských.
http://www.checker.freeproxy.ru/checker/last_checked_proxy.php
http://spys.ru/proxys/ru/

Anonymní bezplatná proxy s možností představit se ze tří zemí. Funguje s vyhledáváním Google.
https://hide.me/en/proxy

Emulátory Google vyhledávání v různých zemích zadáním parametrů vyhledávání.
http://searchlatte.com/
http://isearchfrom.com/

Služba umožňuje hloubkovou kontrolu (až 500) pozice webu podle regionu v Yandexu.

Analyzuje množství odkazů na webu, generuje řezy na základě různých kritérií: typ odkazu, kotvy, stránky. Ukazuje váhu zpětných odkazů. Služba je dostupná pouze registrovaným uživatelům.
http://ahrefs.com

Kontroluje přítomnost zpětných odkazů na stránky v navrhované Seznam adres URL(až 100 stran).
http://webmasters.ru/tools/tracker

Zobrazuje počet lajků (plus1) na Google+. Okamžitě můžete zadat seznam adres URL ke kontrole.
http://www.plusonechecker.net/

Ukazuje popularitu na Twitteru, Google+, Facebooku, LinkedIn, Pinterestu, Delicious, StumbleUpon, Diggs.
http://sharedcount.com

Ukazuje popularitu první stránky webu na Twitteru, Google+, Facebooku, Delicious, StumbleUpon. U ruských stránek jsou údaje někdy nesprávné.
http://www.coolsocial.net

Prohledá stránky a generuje zprávy "Shares" hlavních zahraničních sociální sítě pro tyto stránky. Registruje uživatele prostřednictvím účtu Twitter. Reportáže můžete vidět hned druhý den.
https://socialcrawlytics.com

Zkontroluje danou URL, zda neobsahuje podezřelý kód, zobrazí načtené skripty a výsledky jejich kontroly.
http://vms.drweb.com/online/

Kontroluje adresy URL na přítomnost virů pomocí 30 skenerů.
https://www.virustotal.com/#url

Systém ochrany webu proti virům. Denně skenuje soubory webu a odesílá e-mailem zprávu o jejich změnách.

| 10.07.2015

Při práci na kódu je velmi snadné přehlédnout a přehlédnout čárku nebo závorku. A opětovné čtení dlouhého nefunkčního kódu při hledání takové chyby je obecně nevděčný úkol. V takovém případě může pomoci kontrola kódu pomocí speciálních softwarových nástrojů. Náš výběr je věnován několika zvláště oblíbeným validátorům jazyka JavaScript.

« JSLint zraní vaše city“ – toto varování lze vidět na webových stránkách validátoru JSLint, který v roce 2002 vytvořil Douglas Crockford. A to je pravda, protože JSLint velmi často najde mnoho chyb v perfektně fungujícím kódu. Pokud se snažíte vylepšit svůj kód a uvést jej do ideálního stavu, využijte tuto službu.

JSHint je pohodlnější a přizpůsobitelnější a také oblíbenější verze validátoru JSLint. JSHint je oblíbený programátory pro jeho schopnost zvolit nastavení a pravidla pro kontrolu kódu a je dodáván s dobrou dokumentací. Snadno integrovatelné do editorů.

Tento nástroj má také dostatečné množství vlastních pravidel, která mohou mít i další přizpůsobitelné parametry. K dispozici jsou různé pluginy. ESLint je snadno pochopitelný a má mnoho funkcí, které nenajdete v jiných službách.

Nástroj Styl kódu JavaScript se od předchozích liší tím, že nekontroluje případné chyby a chyby v kódu. Účelem JSCS je kontrolovat a odhalovat porušení stylu kódu. Uživatelé mají k dispozici mnoho přednastavení a hotových konfigurací, které můžete začít okamžitě používat, pokud dodržujete stejný kódový styl.

Moderní trendy a webové aplikace radikálně změnily možnosti vývojářů. Není pochyb o tom, že potřebují nějaký druh IDE pro kódování nových souborů a jejich uložení pro pozdější umístění. Co když otestujete pouze úryvky kódu? Naštěstí k tomu v dnešní době existuje velké množství různých nástrojů!

V tomto článku budeme hovořit o 15 webových aplikacích pro online testování kódu. Všechny fungují, pokud jste připojeni k internetu; Některé z nich nabízejí profesionální plány pro další balíček nemovitostí. Většina z nich bude užitečná při hledání a ladění částí javascriptu nebo PHP.

1.Kódový blok

Vytvořil Steven Hazel, je unikátní webová aplikace, která vám umožňuje kódovat syntaktické konstrukce v celé síti. Kromě ladění umožňuje Codepad svým uživatelům kopírovat/vkládat důležité části kódů a sdílet je online.

Výstupní obrazovka zobrazuje zprávy o jakýchkoli chybách spojených s vaším kódem. Pomocí tlačítek v levém menu můžete změnit jazyk (C/C++, Perl, PHP, Python, Ruby atd.). Codepad je určen spíše pro vývojáře software kteří potřebují spolupracovat a ladit ty nejproblematičtější programy.

2. Napište kód online

Hlavní webová stránka vás přesměruje na její editor Java Script. Můžete si vybrat mezi JS, PHP a základním kódováním URL. Aplikace je nejen bezpečná a spolehlivá, ale také poměrně snadno použitelná.

Zajímavé je, že výsledky své práce uvidíte hned pod textovým polem. Pokud tedy kliknete na „spustit kód“, výsledek se zobrazí na obrazovce. Ladění velké PHP skripty může být složitější, protože vyžaduje zahrnutí dalších souborů.

Aplikace vám však poskytne nepostradatelnou pomoc při testování nového nápadu na sílu.

3.Tinkerbin

Klidně to mohu nazvat mým oblíbeným online zdrojem pro úpravu kódů. Podporuje HTML5/CSS3/JS a výsledek zobrazuje přímo na obrazovce. Aplikace je zatím ve vývoji alfa, ale většina nástrojů funguje skvěle a rychle najde chyby v programech.

Vykreslovací engine podporuje jazyky jako Coffeescript a Sass in CSS framework. Mohou se pochlubit pokročilým systémem správy a podporou mnoha značek webdesignu, které byste raději použili pro další práci.

Nelze ignorovat skutečnost, že pro nejoblíbenější možnosti existují klávesové zkratky. Takovou funkci však nenajdeme ve všech webových aplikacích, nemluvě o editorech kódu zabudovaných v prohlížeči. Když zadáte nové značky, IDE automaticky vyplní nové řádky. Tinkerbin je front-endový nástroj, který by rozhodně měl být ve vašich nástrojích pro vývoj webu.

4.JS Bin

Pro začátečníky může práce s rozhraním způsobit určité potíže. Aby tomu zabránili, mohou použít . JS Bin nabízí velký počet knihovny na výběr - jQuery, JQuery UI, jQM Prototype, MooTools atd.

Pokud kódujete různé prvky, projekty se automaticky uloží. Navíc máte možnost stáhnout si konečný výsledek své práce nebo uložit zdroj online. Tento systém je pro export a ukládání kódu vhodnější než běžná šablona.

5.JsFiddle

Každý, kdo navštívil Stack Overflow, by měl vědět o . Jejich rozhraní se liší od JSBin tím, že nabízí více možností.

Podporuje také knihovny, jako je Prototype a jQuery. Navíc můžete povolit další externí zdroje do souborů JS/CSS v jakémkoli testovaném dokumentu. Je neuvěřitelné, že aplikace dokonce podporuje XHP Ajax, kde můžete předávat informace ze serveru do okna prohlížeče klienta a naopak.

6.ČSSDDesk

Přecházíme od skript k jazyku stylů a . Vše vypadá zhruba stejně jako v předchozích nástrojích: zdrojový text je vlevo, finální webová stránka je vpravo. Tato webová aplikace je skvělá pro vytváření šablon webových stránek a testování vlastností CSS3.

7.Jsdo.It

Některé aplikace jsou v japonštině, takže si myslím, že byly vytvořeny někde v Asii. Na jejich rozhraní se mi nejvíce líbí možnost nahrávat nově vytvořené soubory a ukládat je do projektu. Celá rozvržení webových stránek můžete snadno ukládat online a přistupovat k nim a upravovat je z libovolného počítače.

8. Google Code Playground

Byl jsem překvapen, kolik vývojářů neví o existenci . dostáváte plný přístup na jejich API a ve stejném okně můžete ladit všechny své kódy.

Rozhraním API myslím to, že můžete získat data z největších produktů Google: příspěvky z Bloggeru, orientační body z Google mapy a dokonce i videa přímo z YouTube. Když kliknete na různé možnosti, data v okně náhled jsou také aktualizovány.

Navrhoval bych ponechat tento nástroj pouze jako zdroj, protože nebude vhodný pro vše, co napíšete. Google je však velká společnost s mnoha rozhraními API pro data zdrojového kódu. Pokud budete někdy potřebovat materiál z YouTube nebo vyhledávač Google, tato pomůcka se vám bude určitě hodit.

9.IDEOne

– další nástroj pro „hluboké“ programování a vývoj softwaru. Jejich online editor podporuje zvýrazňování syntaktických prvků pro řadu důležitých jazyků, včetně Objective-C, Java, C#, VB.NET, SQL a mnoha dalších. atd.

10. Viper7 Codepad

Tato webová aplikace, známá také jako , se nachází na webu, kde přesměrovává na stejný online editor. Jejich nástroje jsou nakonfigurovány tak, aby ladily výstupní proměnnou PHP, která se v závislosti na vaší volbě může lišit mezi PHP5 a PHP4.

Vytvořením účtu lze Codepad používat jako osobní úložný systém. Zde, stejně jako v jiných online editorech, můžete každý PHP projekt pojmenovat a uložit online zdarma. Tento editor kódu se liší v tom, že uživatelé nemusí do svého počítače instalovat žádný software. Jak je každý skript interpretován, editor nabídne další meta podrobnosti, jako jsou záhlaví volání prohlížeče nebo odpovědi.

11.JSLint

Je to samo o sobě trochu zvláštní, přitom editor kódu funguje podle zcela standardního schématu.

Nabízené možnosti vás mohou zmást, pokud jste se s těmito typy šablon ještě nesetkali. Pokud máte určité dovednosti, můžete pracovat s open source. Mnoho zdrojových kódů však nepodporuje ani zvýraznění syntaxe, což je vzhledem k tak široké škále možností do očí bijící opomenutí. Doporučil bych to zkusit, pokud máte trochu volného času, ale není zaručeno, že se stane vaším oblíbeným nástrojem pro ladění javascriptu.

12. SQL housle

O něco dříve jsme se podívali na webovou aplikaci s názvem jsFiddle. Nyní je čas mluvit o tom, co funguje ve stejném duchu, s výjimkou SQL databáze syntaktická data. Podařilo se mi najít slušnou alternativu pro testování kódu databáze.

Všechny výstupní informace z vašeho SQL kódu se objeví v tabulce pod editory. Můžete napsat nový kód pro použití dat vpravo a vygenerovat diagram vlevo. Toto schéma databáze je kód SQL, který můžete uložit, abyste mohli exportovat svou aktuální databázi a vše znovu nainstalovat na nový server.

Pokud nejste obeznámeni s databázemi nebo jazykem SQL, pak pro vás tato aplikace pravděpodobně nebude užitečná. Ale pro vývojáře, kteří se chtějí naučit SQL, je tento nástroj perfektní!

13. Cloud9 IDE

Podle mého názoru je nejlepší redaktor zdroje ze všech dostupných v síti. Nejedná se pouze o editor, ale o celý systém nástrojů a zdrojů; na jejich serverech můžete ukládat všechna úložiště zdrojového kódu.

Registrace je zdarma pro všechny komunitní projekty. Pokud potřebujete osobní prostor před vývojem, bude to stát 15 $ měsíčně nebo 180 $ ročně. Úložiště soukromých kódů můžete sdílet s kýmkoli, koho si vyberete. Tato možnost umožňuje vývojářům spolupracovat na různých projektech.

Každý nový projekt uloženy v podsložce, kde můžete vytvářet skutečné fyzické soubory. HTML, CSS, JS, PHP a vše, co potřebujete pro kódování, bude ve vašem účtu. Postupem času budete moci tyto soubory odeslat jako celý projekt nebo si je stáhnout do počítače.

Škála možností, které Cloud9 nabízí, je velmi široká. Doporučuji se porozhlédnout na 10-15 minut v účtu zdarma a hned si zamilujete, jak UI funguje. Společnost nadále roste, takže doufám, že během několika příštích let přidám nové užitečné možnosti.

14.CodeRun

– online editor pro jakoukoli dynamickou webovou aplikaci. Textový editor velmi podobný Microsoftu Vizuální studio; můžete dokonce kódovat v C# pro ASP.NET. Jejich knihovny zahrnují zdroje třetích stran, jako je Facebook Connect a Silverlight.

Kromě webových aplikací založených na Microsoftu můžete kódovat přímo v javascriptu nebo PHP. Princip CodeRun se příliš neliší od Visual Studia: vytvoření nového webového projektu a práce na něm samostatné soubory. V dolní části obrazovky jsou nástroje pro ladění a výsledky z okna konzoly.

Nepostradatelné, pokud máte zkušenosti s Visual Studio. Rozhraní je téměř stejné a můžete dokonce stahovat/nahrávat soubory projektu do počítače. Toto je další nástroj, který zkušení vývojáři webu mohou vzít na vědomí.

15. Kompilátor

Šablona je velmi podobná předloze Windows aplikace. Můžete pracovat s otevřené dokumenty a upravovat soubory na cestách. Než však budete moci začít vytvářet nové projekty, budete se muset zaregistrovat.

Vzhledem k tomu, že vzhled stránky připomíná běžnou desktopovou aplikaci, je práce s ní poměrně jednoduchá i pro začátečníky. Nástroje podporují programovací techniky jako C++, C# a Visual Basic. Celkově by měl být Compilr záložní aplikací pro testování a ladění zdrojového kódu.

Konečně

Počet vzájemně propojených počítačů roste, což vývojářům usnadňuje spolupráci v prohlížeči. Nové technologie se objevují prostřednictvím místních aplikací a kdo ví, jak daleko to dojde.

Doufám, že sbírka nástrojů pro testování kódu uvedená v našem článku vás přiměla přemýšlet moderní prostor pro rozvoj. V dnešní době nic nestojí připojení HTML/CSS webového projektu během několika minut a získání malého demo videa. Upozorňujeme, že tyto nástroje jsou určeny pouze k tomu, aby vám pomohly v procesu vytváření konečného produktu.