Как да тествате и оптимизирате JS скриптове. Проверка на достъпността за хора с увреждания
3,6 от 5
Здравейте всички!
Днес ще видим как можете да тествате ефективността на вашия JS код и да го оптимизирате съответно.
Преди няколко месеца написах статия за това, в която разгледахме как да използваме тази конзола. Днес ще използваме метода console.profile() и ще видим как може да се използва за тестване и след това подобряване на скриптове.
пясъчник
Първо, нека създадем малък HTML документ, който ще съдържа няколко елемента и кода, който ще тестваме.
някакъв текст
- Някакъв елемент с текст
Ще поставим самия код между console.profile() и console.profileEnd().
Проверка за съществуване на елемент
Често се случва едни и същи скриптове да се зареждат за всички страници на сайта, съответно понякога може да няма необходимите елементи. Въпреки че jQuery няма да изпълни код за елементи, които не съществуват, все пак е добра идея да проверите за съществуването на елемент. Нека разгледаме два варианта на кода и да обърнем внимание на времето на тяхното изпълнение. Първият код не проверява:
Console.profile();
$("#основен елемент");
console.profileEnd();
В резултат на изпълнението на този код получаваме следната картина в конзолата на Firebug:
Вторият код проверява дали има елементи, върху които да се действа:
Console.profile() ;
var ele = $("#somethingThatisNotHere");
ако (ele) (
ele.text("Мало текста").slideUp(300).addClass("редактиране");
}
$("#основен елемент");
console.profileEnd();
И извежда това на конзолата:
В резултат на това заключаваме, че е по-добре да проверим за съществуването на елемент - скоростта на изпълнение ще бъде по-голяма. Но това не означава, че трябва да проверявате всичко подред: обикновено има основният елемент на групата, без който всички останали не могат да бъдат. Това е, което трябва да се провери.
Ефективно използване на селектори
Най-вероятно сте прочели моя. Ако не, тогава прочетете. Там говорих за това как браузърите анализират селектори и кои селектори работят с каква скорост. Накратко, id селекторът работи най-бързо, докато универсалните са най-бавни.
Така че нека направим експеримент. Отбелязвам, че скоростта на изпълнение на скрипта може да се различава от различни компютрии браузъри.
Първо, нека се опитаме да изберем елементи по клас:
Console.profile() ;
$(".избрано");
console.profileEnd();
Console.profile() ;
$("li.selected");
console.profileEnd();
Резултат 0.291ms - намален с 0.027ms. Сега нека прецизираме селектора още малко: необходимите ни елементи трябва да са вътре в контейнера с id="someList" :
Console.profile() ;
$("#someList .selected");
console.profileEnd();
0.283ms е леко подобрение. Нека прецизираме селектора с името на етикета:
Console.profile() ;
$("#someList li.selected");
console.profileEnd();
Получих 0,275 ms. Сега нека изберем елемента директно по id в името на интереса:
Console.profile() ;
$("#основен елемент");
console.profileEnd();
0,165 ms е новият ни рекорд. Сега мисля, че е ясно как най-добре да се пишат селектори.
Избягване на излишни операции
Понякога в кода може да има конструкции като:
// Някакъв код
$(елемент).doSomething();
// След това още код
$(елемент).doSomethingElse();
// И още код
$(елемент).doMoreofSomethingElse();
Никога не правете това. Един елемент се иска отново и отново. Това е твърде скъпо по отношение на производителността.
Нека вземем нашата пясъчна кутия и извършим подобен процес в нея:
Console.profile() ;
$("#основен елемент").hide();
$("#mainItem").val("Здравей");
$("#mainItem").html("Здравей!");
$("#основен елемент").show();
console.profileEnd();
Горният код може също да бъде окован:
Console.profile();
$("#mainItem").hide().val("Здравей").html("Здравей!").show();
console.profileEnd();
Когато се използва верижно свързване, елементът се изисква веднъж и след това препратка към него се предава на методите. Това намалява времето за изпълнение.
Можете също да кеширате елемент и да извършвате действия върху вече кеширания:
Console.profile() ;
var elem = $("#mainItem");
elem.hide();
elem.val("Здравей");
elem.html("О, здравей!");
elem.show();
console.profileEnd();
Както можете да видите от примерите, кеширането и използването на вериги на действия намалява времето за изпълнение на скриптовете.
Интелигентна манипулация на DOM
Както знаете, операциите с DOM (Document Object Model), като получаване или вмъкване на елементи, са много ресурсоемки. Нека да видим как можем да ускорим тези операции.
Колкото и странно да изглежда, все още има потребители, които деактивирайте JavaScript. И повечето уебмастърите просто ги "колят", но понякога искате да дадете съвет, така че потребителят има активиран JavaScript. И ето как да направите проверете: "JavaScript е активиран", и ако не, тогава покажете ред с молба да го включите, ще ви кажа в тази статия.
Кодът по-долу трябва да бъде поставен вътре в етикета тяло:
Нека обясня малко този код. Ако потребителят има JavaScript е активиран, след това методът пиши()ще работи и ще изведе низ. Ако JavaScript е деактивиран, след това целият етикет сценарийще бъдат игнорирани. Въпреки това, той отива по-далеч noscript етикет. Този етикет съдържа елементи, които ще се покаже от браузъра, ако JavaScript е деактивиран. Това е съдържанието на етикета noscript се показва, когато JavaScript е деактивиран, а когато е разрешено, потребителят noscriptне вижда.
По толкова прост начин, Уеб администраторичесто пишат: Моля, активирайте JavaScript“, или покажете няколко красиви снимки с подобна заявка, или нещо друго, защото вътре noscript етикетможете да поставите всякакви HTML тагове. И сега можете да приложите придобитите знания на вашия сайт, защото не е тайна, че сега не е толкова лесно да намерите сайт, който не би използвал JavaScript.
Проверки html код, даден като връзка към страница или просто като качен файл или копиран текст. Дава списък с коментари с препоръки за тяхното коригиране.
http://validator.w3.org/
css валидиране (css валидатор)
Проверява за стилове на документ или лист със стилове, разположен в отделен файл.
http://jigsaw.w3.org/css-validator/
Проверка на емисии (feed) RSS и Atom
Проверява дали RSS и Atom каналите работят правилно.
http://validator.w3.org/feed/
Проверка на правописа на уеб страница
Подчертава грешки по даден URL адреси на страницид.
http://webmaster.yandex.ru/spellcheck.xml
Показва грешки в текста, копиран в полето за доказателство.
http://api.yandex.ru/speller/
Проверка на структурата на уеб страницата
Показва структурата на уеб страница. От значение за проверка на html5 документи. Неправилно показване на знаци на кирилица (:.
http://gsnedders.html5.org/outliner/
Проверка на съдържанието за уникалност
AT безплатна версияпоказва до 10 страници в интернет с текст, който частично съвпада с вашата страница.
http://www.copyscape.com
Проверява уникалността на въведения във формата текст. В безплатната версия можете да изчакате резултатите.
http://www.miratools.ru/Promo.aspx
Проверява уникалността както на въведения текст, така и на текста на дадения URL, показва нивото на уникалност в проценти. Има собствен алгоритъм за проверка.
http://content-watch.ru
Настолни програми за проверка на уникалността на съдържание от борси за копирайтъри. Работят дълго време, но с високо качество. Etxt има версии за три операционна система: Mac, Linux и Windows.
http://advego.ru/plagiatus/
http://www.etxt.ru/antiplagiat/
Показва сайтове с подобно съдържание и подобна вътрешна структура.
http://similarsites.com
Проверка на cms на сайта
Проверява за функциите на най-известните cms.
http://2ip.ru/cms/
Проверка на използваемостта на уебсайта за различни потребителски групи
Проверка на достъпността от мобилни устройства
Оценява възможността за преглед на страница с мобилни устройстваи дава списък с коментари и грешки.
http://validator.w3.org/mobile/
Проверка на удобството на сайта за телефони от Google.
https://www.google.com/webmasters/tools/mobile-friendly/
Показва скоростта на зареждане на сайта на мобилни устройства.
https://testmysite.withgoogle.com/intl/ru-ru
Изход от емулатора на уебсайт с мобилен телефон. Показва сайта през очите на избрания модел.
http://www.mobilephoneemulator.com/
Проверка на достъпността за хора с увреждания
Услуга за проверка на страници за хора с увредено зрение. Предлага се онлайн и като плъгин за Firefox.
http://wave.webaim.org/
Преглед на съдържанието на сайта през очите на робот за търсене
Показва текст на сайта близо до това, което вижда индексаторът за търсене.
http://www.seo-browser.com/
Дистрибуцията на текстов браузър lynx за системи win32. Преди да използвате, трябва да редактирате lynx.bat, като посочите пътя до директорията с lynx в него.
http://www.fdisk.com/doslynx/lynxport.htm
Премахва всички маркировки и показва текста на страницата, мета и заглавните тагове, броя на външните и вътрешните връзки. Показва визуализация на страницата в Google.
http://www.browseo.net
Проверка на линковата структура на сайта
Проверка за повредени връзки
Показва списък с изходящи връзки за URL адрес и проверява техния отговор. Той може да проверява рекурсивно, тоест да се придвижва от един документ към друг сам.
http://validator.w3.org/checklink
Безплатен инструмент за проверка на повредени връзки. За да работи, трябва да го инсталирате на вашия компютър. Рекурсивно обхожда сайта, прави отчети, може да бъде полезен за картографиране на сайта.
http://home.snafu.de/tilman/xenulink.html
Проверка на връзки и заглавия на страници
Сканира до 500 уебсайт страници в безплатната версия. Проверява броя на външните и вътрешните връзки. Показва информация за сканираните страници: влагане, кодове на отговор, заглавия, мета информация и заглавия.
http://www.screamingfrog.co.uk/seo-spider/
Проверка на структурата на връзките и теглото на вътрешните страници
Програмата сканира сайта, изгражда матрица от вътрешни връзки, добавя външни (входящи) връзки от дадените URL адреси и на базата на тези данни изчислява вътрешните тегла на страниците на сайта. Програмата може да се използва за намиране на външни (изходящи) връзки за списък с URL адреси за страници в даден сайт.
Проверка на кодовете за отговор на сървъра, видимостта на сайта от търсещите роботи, техническите характеристики на сайта
Проверка на HTTP заглавки и отговор на сървъра, видимост на страницата за роботи
Проверява кодовете за отговор на сървъра, прогнозира скоростта на зареждане на страницата в зависимост от размера на нейните данни в байтове, показва съдържание html тагглава, вътрешни и външни връзкиза страницата, съдържанието на страницата през очите на робот за търсене.
http://urivalet.com/
Проверява кодовете за отговор на сървъра. Позволява ви да проверявате пренасочвания (кодове на отговор 301, 302), заглавка Last-Modified и др.
http://www.rexswain.com/httpview.html
Показва количеството и съдържанието на прехвърлените данни при зареждане на страницата.
http://www.websiteoptimization.com/services/analyze/
Проверява за пренасочвания, използването на каноничния атрибут, мета тагове, някои аспекти на сигурността на сайта. Предоставя препоръки за подобряване на зареждането на страницата.
http://www.seositecheckup.com
Проверка на информация за домейн и IP адрес
WHOIS услуга на центъра за регистрация на домейни RU център. Дава информация за IP адреси и домейни по света. Понякога замръзва.
https://www.nic.ru/whois/?wi=1
Whois услуга от РосНИИРОС (RIPN). Предоставя информация за домейни в RU зона и IP адреси от базата данни RIPE (Европа).
http://www.ripn.net:8080/nic/whois/
Определя къде се хоства домейнът и също така показва IP адреса на сайта.
http://www.whoishhostingthis.com
Проверка дали IP адресът е в черния списък за изпращане на имейл.
http://whatismyipaddress.com/blacklist-check
http://ru.smart-ip.net/spam-check/
Проверка на MX записи за домейн. Преглед SMTP сървъриза домейна. Проверка на IP в черни списъци за изпращане по пощата.
https://mxtoolbox.com/
Търсене на регистрирани търговски марки в САЩ.
http://tmsearch.uspto.gov/
Проверка на файловете robots.txt
Проверява наличността на страниците на сайта за индексиране от робота Yandex.
http://webmaster.yandex.ru/robots.xml
Проверява коректността на файла robots.txt.
https://www.websiteplanet.com/webtools/robots-txt
проверка на място
Мониторинг на наличността на сайта. Позволява ви да свържете един сайт безплатно с минимални опции за проверка.
http://www.siteuptime.com
Проверка на скоростта на зареждане на сайта. Изпраща отчет по имейл. То има платени услугимониторинг на достъпността на сайта.
http://webo.in
Проверка на скоростта на зареждане на страницата на сайта.
http://www.iwebtool.com/speed_test
Проверка на индексирането и показването на сайта от търсачките
Видимост на сайта в търсачките
сервизно показване ключови думиза сайта, за който е в ТОП 20 (топ двадесет) на резултатите от търсенето с Google във времето. Данни за търсене и рекламен трафик.
http://www.semrush.com/
Позиция в TOP50 yandex и Google. Тикер на сайта и PR начална страница, присъствие във важни директории, видимост в горната част за RF заявки.
http://pr-cy.ru/
Проверка на забраните и нивото на доверие към сайта
Проверка на доверието на уебсайта. Услуга, която твърди, че измерва доверието към Yandex (и без това никой не може да провери :).
http://xtool.ru/
Проверка на филтрите за наслагване Panda и Penguin от Google. Услугата ви позволява визуално да определите дали сайтът се е сринал на датите на актуализациите на Panda и Penguin.
http://feinternational.com/website-penalty-indicator/
Проверка на Page Rank на страниците на сайта (когато копирате URL в инструмента, трябва да изтриете последната буква и след това да я напишете отново).
http://www.prchecker.net/
Проверка на историята на сайта
Показва историята на развитието на сайта и ви позволява да видите екранни снимки на стари страници.
http://www.archive.org/web/web.php
История на позициите на сайта в Google TOP (ключови фрази, страници, заглавия), PR индикатори, TIC, Alexa Rank, брой обратни връзки за популярни сайтове.
http://SavedHistory.com
SEO добавки за проверка на уебсайтове
SEO Doctor е добавка за Firefox. Показва връзки на страницата и предоставя удобен интерфейс към различни SEO услуги.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/
SeoQuake е добавка за Firefox. Показва най-важните характеристики на сайта: TIC, PR, препратки, Alexa Rank. Работи както с резултатите от търсенето с Google, така и с Yandex. Позволява ви бързо да анализирате конкурентите.
http://www.seoquake.com/
IEContextHTML - допълнение към Internet Explorer. Проверява индексирането на връзки в Yandex и Google, показва списък с външни и вътрешни връзки, позволява ви да импортирате данни от уеб страници.
От местоположението зависи видимостта на сайта в търсачките
Актуализиран списък с безплатни прокси сървъри, включително руски.
http://www.checker.freeproxy.ru/checker/last_checked_proxies.php
http://spys.ru/proxys/ru/
Анонимен безплатен прокси с възможност за представяне от три държави. Работи с Google търсене.
https://hide.me/en/proxy
Емулатори Търсене в Googleв различни държави чрез задаване на параметри за търсене.
http://searchlatte.com/
http://isearchfrom.com/
Проверка на позиции в Yandex и Google
Услугата позволява дълбока проверка (до 500) на позицията на сайта по региони в Yandex.
Мрежов анализ на сайта, проверка на обратни връзки
Анализ на обратната връзка
Анализира линк масата на сайта, формира секции по различни критерии: тип връзка, котви, страници. Показва теглото на препратките. Услугата е достъпна само за регистрирани потребители.
http://ahrefs.com
Проверка за препратки към сайта
Проверява наличието на препратки към сайта в предложените списък с URL адреси(до 100 страници).
http://webmasters.ru/tools/tracker
Проверка на популярността на даден сайт в социалните медии
PlusOneChecker
Показва броя на харесванията (плюс едно) в Google+. Можете веднага да въведете списък с проверени URL адреси.
http://www.plusonechecker.net/
Facebook Graph API Explorer
SharedCount
Показва популярност в Twitter, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com
готин социален
Показва популярността на първата страница на сайта в Twitter, Google+, Facebook, Delicious, StumbleUpon. За руските сайтове понякога данните са неверни.
http://www.coolsocial.net
социална популярност
Social Crawlytics
Сканира сайта и генерира отчети "Споделяния" на основните чуждестранни социални мрежиза тези страници. Регистрира потребители чрез акаунт в Twitter. Докладите могат да се видят още на следващия ден.
https://socialcrawlytics.com
Проверка на сайта за вируси
Д-р Уеб
Проверява посочения URL за подозрителен код, показва заредените скриптове и резултатите от тяхната проверка.
http://vms.drweb.com/online/
VirusTotal
Проверява URL адресите за вируси с 30 скенера.
https://www.virustotal.com/#url
Сигнализатор
Система за защита на сайта от вируси. Ежедневно сканира файловете на сайта и изпраща отчет за промените им по имейл.
| 10.07.2015
Когато работите върху код, е много лесно да пренебрегнете и пропуснете някоя запетая или скоба. И повторното четене на дълъг неработещ код в търсене на такава грешка обикновено е неблагодарна задача. В този случай проверката на кода със специални програми за инструменти може да помогне. Нашата селекция е посветена на няколко особено популярни валидатори за езика JavaScript.
« JSLint ще нарани чувствата ви” - такова предупреждение може да се види на сайта на валидатора JSLint, създаден през 2002 г. от Дъглас Крокфорд. И това е вярно, защото много често JSLint намира много грешки в абсолютно работещ код. Ако искате да подобрите кода си и да го доведете до идеалното състояние - използвайте тази услуга.
JSHint е по-удобна и адаптивна и по-популярна версия на валидатора JSLint. JSHint е предпочитан от програмистите, тъй като може да избира настройки и правила за проверка на кода и идва с добра документация. Лесно интегриран в редактори.
Този инструмент също има голям брой персонализирани правила, които могат да имат допълнителни опции за персонализиране. Налични са различни добавки. ESLint е лесен за разбиране и има много функции, които не се срещат в други услуги.
JSCS
Инструментът JavaScript Code Style се различава от предишните по това, че не проверява кода за потенциални бъгове и грешки. Задачата на JSCS е да проверява и открива нарушения в стила на кодекса. Има много предварително зададени и готови конфигурации, достъпни за потребителите, които можете да започнете да използвате веднага, ако се придържате към същия стил на код.
Съвременните тенденции и уеб приложения промениха драматично възможностите на разработчиците. Няма съмнение, че те се нуждаят от някакъв вид IDE, за да кодират нови файлове и да ги запазят за по-късно поставяне. Но какво ще стане, ако просто проверим кодовите фрагменти? За щастие днес има много различни инструменти за това!
В тази статия ще говорим за 15 уеб приложения за онлайн тестване на код. Всички те работят при условие на интернет връзка; някои от тях предлагат професионални планове за допълнителен пакет имоти. Повечето от тях ще бъдат полезни, когато се опитвате да намерите и отстраните грешки в части от javascript или PHP.
1.Codepad
Създадено от Стивън Хейзъл е уникално уеб приложение, с което можете да кодирате синтактични конструкциив цялата мрежа. Освен отстраняване на грешки, Codepad позволява на своите потребители да копират/поставят важни части от кодове и да ги споделят онлайн.
Изходният екран показва всички съобщения за грешка, свързани с вашия код. С помощта на бутоните в лявото меню можете да промените езика (C/C++, Perl, PHP, Python, Ruby и други). Codepad е повече за разработчици софтуеркоито трябва да работят заедно и да отстраняват грешки в най-проблемните програми.
2. Напишете код онлайн
Основният уебсайт ще ви пренасочи към техния редактор на Java Script. Можете да избирате между JS, PHP и основно URL кодиране. Приложението е не само безопасно и надеждно, но и доста лесно за използване.
Интересното е, че ще видите резултатите от работата точно под текстовото поле. Така че, ако щракнете върху „изпълни кода“, резултатът ще се покаже на екрана. Голямо отстраняване на грешки PHP скриптовеможе да бъде по-трудно, защото изисква включване на други файлове.
Независимо от това, приложението ще ви предостави незаменима помощ при тестване на силата на нова идея.
3.Тинкербин
Мога лесно да се обадя на любимия си онлайн ресурс за редактиране на код. Поддържа HTML5/CSS3/JS и показва резултата директно на екрана. Приложението все още е в алфа разработка, но повечето от инструментите работят добре и бързо намират грешки в програмите.
Механизмът за изобразяване поддържа езици като Coffeescript и Sass в css рамка. Те могат да се похвалят с усъвършенствана система за управление и поддръжка за много марки за уеб дизайн, които бихте предпочели да използвате за по-нататъшна работа.
Невъзможно е да се пренебрегне фактът, че има клавишни комбинации за най-популярните опции. И такава функционалност не се намира във всички уеб приложения, да не говорим за редакторите на кодове, вградени в браузъра. Когато въвеждате нови етикети, IDE автоматично вмъква нови редове. Tinkerbin е преден инструмент, който определено трябва да бъде във вашата кутия с инструменти за уеб разработка.
4.JS кошче
За начинаещи работата с интерфейса може да причини известни затруднения. За да избегнат това, те могат да използват. JS Bin предлага голям брой библиотеки за избор - jQuery, jQuery UI, jQM Prototype, MooTools и др.
Ако кодирате различни елементи, проектите ще бъдат запазени автоматично. Освен това имате възможност да изтеглите крайния резултат от работата си или да запазите източника онлайн. Тази система е по-подходяща за експортиране и запазване на вашия код, отколкото обикновен шаблон.
5.JsFiddle
Всеки, който е посетил Stack Overflow, трябва да знае за . Техният интерфейс се различава от JSBin по това, че предлагат повече опции.
Той също така поддържа библиотеки като Prototype и jQuery. Освен това можете да включите допълнителни външни източницикъм JS/CSS файлове във всеки тестван документ. Невероятно, но приложението дори поддържа XHP Ajax, където можете да предавате информация от сървъра към прозореца на браузъра на клиента и обратно.
6.CSSDesk
Преминаване от скриптове към стилов език и . Всичко изглежда почти същото като в предишните инструменти: изходният текст е отляво, крайната уеб страница е отдясно. Това уеб приложение е чудесно за създаване на шаблони за уеб страници и тестване на CSS3 свойства.
7.Jsdo.It
Някои приложения са на японски, което ме кара да мисля, че са създадени някъде в Азия. Това, което ми харесва най-много в интерфейса им, е как зареждат файловете, които току-що са създали, и ги съхраняват в проект. Можете лесно да съхранявате цели оформления на уеб страници онлайн и да имате достъп до тях и да ги редактирате от всеки компютър.
8. Google Code Playground
Изненада ме колко много разработчици не знаят за съществуването на . Вие получавате пълен достъпкъм техния API и в същия прозорец можете да дебъгвате всичките си кодове.
Когато говоря за API, имам предвид, че можете да получите данни от най-големите продукти на Google: публикации в Blogger, забележителности на Google Maps и дори видеоклипове в YouTube. Когато щракнете върху различните опции, данните в прозореца предварителен прегледсъщо се актуализират.
Бих ви посъветвал да запазите този инструмент само като ресурс, тъй като няма да е подходящ за всичко, което пишете. Google обаче е голяма компания с много API за данни с изходен код. Ако някога имате нужда от материал от YouTube или Google търсачкатози инструмент със сигурност ще ви бъде полезен.
9.IDEOne
- друг инструмент за "дълбоко" програмиране и разработка на софтуер. Техният онлайн редактор поддържа подчертаване на синтаксиса за редица важни езици, включително Objective-C, Java, C#, VB.NET, SQL и др. други
10. Viper7 Codepad
Това уеб приложение, известно още като , се намира на сайт, който пренасочва към същия онлайн редактор. Техните инструменти са настроени за отстраняване на грешки в изходната променлива на PHP, която може да варира между PHP5 и PHP4 в зависимост от вашия избор.
Чрез създаване на акаунт Codepad може да се използва като система за съхранение на лични данни. Тук, както и в други онлайн редактори, можете да дадете име на всеки PHP проект и да го съхранявате онлайн безплатно. Този редактор на кодове е различен по това, че потребителите не трябва да инсталират софтуер на своя компютър. Докато интерпретира всеки от скриптовете, редакторът ще предложи допълнителни мета-подробности, като извикване на браузъра или заглавки на отговора.
11.JSLint
Само по себе си, малко странно, докато редакторът на код работи по напълно стандартна схема.
Предлаганите опции могат да ви озадачат, ако не сте срещали този вид модел преди. Ако имате набор от специфични умения, можете да работите с отворен код. Много източници обаче дори не поддържат подчертаване на синтаксиса, което е пропуск при толкова широк набор от опции. Бих препоръчал да играете с, ако имате малко свободно време, но няма гаранция, че ще стане любимият ви инструмент за отстраняване на грешки в javascript.
12.SQL Fiddle
Малко по-рано разгледахме уеб приложение, наречено jsFiddle. Сега е време да поговорим за , който работи по същия начин, с изключение на SQL бази даннисинтактични данни. Успях да намеря прилична алтернатива за тестване на кода на базата данни.
Всички резултати от вашия SQL код ще се покажат в таблица под редакторите. Можете да напишете нов код, за да приложите данните отдясно и да генерирате схемата отляво. Тази схема на база данни е SQL код, който можете да запазите, за да експортирате текущата си база данни и да инсталирате отново всичко на нов сървър.
Ако не сте запознати с базите данни или езика SQL, тогава това приложение едва ли ще ви бъде полезно. Но за разработчици, които се интересуват от запознаване със SQL, този инструмент е идеален!
13.Cloud9 IDE
Според мен е най-добър редакторизходни кодове от всички налични в мрежата. Това не е просто редактор, а цяла система от инструменти и ресурси; можете да съхранявате всичките си хранилища на изходния код на техните сървъри.
Регистрацията е безплатна за всички проекти на общността. Ако имате нужда от лично пространство преди разработката, това ще струва $15 на месец или $180 на година. Можете да споделяте частни хранилища на кодове с всеки, който изберете. Тази опция позволява на разработчиците да си сътрудничат по различни проекти.
всеки нов проектсъхранявани в подпапка, където могат да се създават действителни физически файлове. HTML, CSS, JS, PHP и всичко необходимо за кодиране ще бъде във вашия акаунт. След време ще можете да изпращате тези файлове като цял проект или да ги изтегляте на вашия компютър.
Обхватът на възможностите, предлагани от Cloud9, е много широк. Препоръчвам 10-15 минути да разгледате в безплатен акаунт и веднага ще се влюбите в това как работи потребителският интерфейс. Компанията продължава да набира скорост, така че през следващите няколко години се надявам да добавя нови полезни опции.
14.CodeRun
е онлайн редактор за всяко динамично уеб приложение. Текстов редактормного подобен на Microsoft визуално студио; можете дори да кодирате в C# за ASP.NET. Техните библиотеки включват ресурси на трети страни като Facebook Connect и Silverlight.
В допълнение към уеб приложенията, базирани на Microsoft, можете да кодирате директно в javascript или PHP. Как работи CodeRun не се различава много от Visual Studio: създайте нов проект за уебсайт и работете отделни файлове. В долната част на екрана има инструменти за отстраняване на грешки и резултати от прозореца на конзолата.
Незаменим, ако имате опит с Visual Studio. Интерфейсът е почти същият и дори можете да изтегляте/качвате файлове на проекта на вашия компютър. Това е друг инструмент, който опитните уеб разработчици могат да вземат под внимание.
15. Компилатор
Моделът е много подобен на модела Windows приложения. Можете да работите с отворени документи и да редактирате файлове в движение. Въпреки това, преди да започнете да създавате нови проекти, ще трябва да се регистрирате.
Тъй като оформлението на страницата наподобява обикновено настолно приложение, е достатъчно лесно за работа дори и за начинаещи. Инструментите поддържат техники за програмиране като C++, C# и Visual Basic. Като цяло, Compilr трябва да бъде резервно приложение за тестване и отстраняване на грешки в изходния код.
Накрая
Броят на свързаните компютри нараства, което улеснява разработчиците да работят заедно в браузъра. В местните приложения се появяват нови технологии и кой знае докъде ще стигне това.
Надявам се, че колекцията от инструменти за тестване на код в нашата статия ви е накарала да се замислите модерно пространствоза развитие. В днешно време не струва нищо да съставите HTML / CSS уеб проект за няколко минути и да получите малко демонстрационно видео. Моля, имайте предвид, че тези инструменти са само за да ви помогнат в процеса на създаване на крайния продукт.