| 10.07.2015

Працюючи над кодом, дуже легко не помітити і пропустити якусь кому або дужку. А перечитувати довгий непрацюючий код у пошуках такої помилки – взагалі невдячна справа. У цьому випадку допоможе перевірка коду спеціальними програмами-інструментами. Наша добірка присвячена кільком, особливо популярним валідаторам для JavaScript.

« JSLint will hurt your feelings- таке попередження можна побачити на сайті валідатора JSLint, створеного в 2002 році Дугласом Крокфордом. І це правда, оскільки дуже часто JSLint знаходить безліч помилок в коді, що абсолютно працює. Якщо ви прагнете вдосконалення свого коду та доведення до ідеального стану - скористайтеся цим сервісом.

JSHint - зручніша і настроювана, а також популярніша версія валідатора JSLint. JSHint більше подобається програмістам за можливість вибирати налаштування та правила для перевірки коду, та супроводжується гарною документацією. Легко інтегрується у редактори.

Цей інструмент також має достатню кількість правил користувача, які при цьому можуть мати додаткові параметри, що настроюються. Доступні різні плагіни. ESLint легко зрозумілий і має багато особливостей, які відсутні в інших сервісах.

JSCS

Інструмент JavaScript Code Style відрізняється від попередніх тим, що не перевіряє код на наявність потенційних багів та помилок. Завдання JSCS - перевірка та виявлення порушень у стилі коду. Користувачам доступно безліч пресетів і готових конфігурацій, які ви можете відразу ж почати використовувати, якщо дотримуєтеся такого ж кодстайлу.

3.6 із 5

Всім привіт!

Сьогодні ми подивимося, як можна тестувати продуктивність свого JS коду і, відповідно, оптимізувати його.

Кілька місяців тому я написав статтю про , в якій ми розглядали як користуватися цією консоллю. Сьогодні ми будемо використовувати метод console.profile() і побачимо, як за його допомогою можна протестувати і потім покращити скрипти.

Пісочниця

Для початку створимо невеликий HTML документ, в якому будуть розміщені кілька елементів та код, який ми тестуватимемо.

Тестування продуктивності JS скриптів

Якийсь текст

• Якийсь елемент із текстом

console.profile();
// Тут розміщуватимемо наш код
console.profileEnd();

Сам код поміщатимемо між console.profile() і console.profileEnd() .

Перевірка існування елемента

Часто буває так, що для всіх сторінок сайту підвантажуються одні й самі скрипти, відповідно іноді може не бути потрібних елементів. Незважаючи на те, що jQuery не виконає код для неіснуючих елементів, краще все-таки перевірити існування елементів. Розглянемо два варіанти коду та звернемо увагу на час їх виконання. Перший код не перевіряє:

Console.profile();


$("#mainItem");
console.profileEnd();

В результаті виконання цього коду отримаємо ось таку картинку в консолі Фаєрбага:

Другий код перевіряє, чи існують елементи, над якими потрібно виконати дію:

Console.profile() ;
var ele = $("#somethingThatisNotHere");
if (ele) (
ele.text("Some text").slideUp(300).addClass("editing");
}
$("#mainItem");
console.profileEnd();

І видає ось це в консоль:

У результаті робимо висновок, що краще перевіряти існування елемента — швидкість виконання буде більше. Але це не означає, що потрібно перевіряти все підряд: зазвичай, є основний елемент групи, без якого всі інші однаково не можуть бути. Ось його й треба перевіряти.

Ефективне використання селекторів

Швидше за все ви читали мою. Якщо ні, то прочитайте. Там я розповідав про те, як браузери розбирають селектори і які селектори з якою швидкістю працюють. Якщо коротко, то найшвидше працює селектор по id, найповільніше — універсальні.

Отже, проведемо експеримент. Зауважу, що швидкості виконання скриптів можуть відрізнятися на різних комп'ютерах та браузерах.

Для початку спробуємо вибрати елементи за класом:

Console.profile() ;
$(".selected");
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.275ms. Тепер виберемо елемент прямо по id заради інтересу:

Console.profile() ;
$("#mainItem");
console.profileEnd();

0.165ms - наш новий рекорд. Тепер думаю зрозуміло, як найкраще писати селектори.

Уникнення зайвих операцій

Іноді в коді можуть зустрітися конструкції типу:

// Якийсь код
$(element).doSomething();

// Потім ще код
$(element).doSomethingElse();

// І ще код
$(element).doMoreofSomethingElse();

Ніколи не робіть так. Один елемент запитується знову і знову. Це дуже витратно з погляду продуктивності.

Візьмемо нашу пісочницю і проведемо у ній якийсь схожий процес:

Console.profile() ;
$("#mainItem").hide();
$("#mainItem").val("Привіт");
$("#mainItem").html("Привіт!");
$("#mainItem").show();
console.profileEnd();

Вищенаведений код також можна зробити у вигляді ланцюжка:

Console.profile();
$("#mainItem").hide().val("Привіт").html("Привіт!").show();
console.profileEnd();

При використанні ланцюжка елемент запитується один раз і далі методам передається посилання на нього. Це знижує час виконання.

Також можна закешувати елемент і робити дії над закешованим:

Console.profile() ;
var elem = $("#mainItem");
elem.hide();
elem.val("Hello");
elem.html("Oh, hey there!");
elem.show();
console.profileEnd();

Як видно з прикладів, кешування та використання ланцюжків дії знижує час виконання скриптів.

Розумне маніпулювання DOM

Як відомо, операції з DOM (об'єктною моделлю документа), наприклад, отримання або вставка елементів, є дуже ресурсомісткими. Погляньмо, як можна прискорити ці операції.

Сучасні тренди та веб-додатки кардинально змінили можливості розробників. Немає сумніву в тому, що їм потрібен якийсь IDE для кодування нових файлів та їх збереження для подальшого розміщення. А якщо просто перевірити фрагменти кодів? На щастя, в наш час для цього існує безліч різних інструментів!

У цій статті ми розповімо про 15 веб-програм для онлайн тестування кодів. Усі вони працюють за умови з'єднання з Інтернетом; деякі з них пропонують про-плани для отримання додаткового пакета властивостей. Більшість з них виявляться корисними при спробі відшукати та зробити налагодження частини javascript або PHP.

1.Codepad

Створене Стівеном Хейзелом є унікальним веб-додатком, за допомогою якого ви зможете кодувати синтаксичні конструкції у всій мережі. Крім налагодження, Codepad дозволяє своїм користувачам копіювати/вставляти важливі частини кодів та ділитися ними онлайн.

На екрані виводу відображаються повідомлення про всі помилки, пов'язані з вашим кодом. Використовуючи кнопки в лівому меню, можна змінити мову (C/C++, Perl, PHP, Python, Ruby та ін.). Codepad більшою мірою призначений для розробників програмного забезпечення, яким потрібно працювати спільно та налагоджувати найбільш проблемні програми.

2.Write Code Online

Основний веб-сайт перенаправить вас на свій редактор Java Script. Ви можете вибрати між JS, PHP і базовим URL-кодуванням. Додаток не тільки безпечний і надійний, але і досить простий у використанні.

Що цікаво, результати роботи ви побачите просто під текстовим полем. Отже, якщо ви натиснете «запустити код», то результат буде виведений на екран. Налагодження великих PHP скриптів може проходити складніше, тому що потрібно увімкнути інші файли.

Тим не менш, програма надасть вам незамінну допомогу в перевірці нової ідеї на міцність.

3.Tinkerbin

Я цілком можу назвати своїм улюбленим онлайн-ресурсом для редагування кодів. Він підтримує HTML5/CSS3/JS і результат виводить безпосередньо на екран. Програма все ще знаходиться на стадії альфа розробки, але більшість інструментів працюють відмінно і швидко шукають помилки в програмах.

Механізм візуалізації підтримує такі мови як Coffeescript та Sass у рамках CSS. Вони можуть похвалитися просунутою системою управління та підтримкою багатьох брендів веб-дизайну, які ви хотіли б використовувати для подальшої роботи.

Не можна залишити поза увагою і той факт, що тут є гарячі клавіші для найпопулярніших опцій. А така функціональність зустрічається далеко не у всіх веб-додатків, не кажучи вже про вбудовані в браузер редактори кодів. Коли ви вводите нові теги, IDE автоматично вписує нові рядки. Tinkerbin є фронтенд інструментом, який неодмінно повинен бути серед ваших інструментів для веб-розробки.

4.JS Bin

У новачків робота з інтерфейсом може спричинити деякі складнощі. Щоб уникнути цього, вони можуть скористатися . 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 озирнутися в безкоштовному обліковому записі, і ви відразу закохаєтеся в роботу UI. Компанія не перестає набирати обертів, тож у найближчі кілька років я сподіваюся на додавання нових корисних опцій.

14.CodeRun

– онлайн редактор для будь-якої динамічної веб-програми. Текстовий редактор дуже нагадує Microsoft Visual Studio; ви навіть можете кодувати C# для ASP.NET. Їхні бібліотеки включають сторонні ресурси в особі Facebook Connect та Silverlight.

Крім заснованих на Microsoft веб-застосунках, ви можете кодувати прямо в javascript або PHP. Принцип роботи CodeRun мало чим відрізняється від Visual Studio: створення нового проекту веб-сайту та робота над окремими файлами. У нижній частині екрана розташовані інструменти для налагодження та результати вікна консолі.

Незамінний, якщо у вас є досвід роботи з Visual Studio. Інтерфейс практично однаковий, і ви навіть можете завантажувати файли проекту на свій комп'ютер. Це ще один інструмент, який досвідчені веб-розробники можуть взяти до уваги.

15.Compilr

Шаблон дуже схожий на шаблон додатків Windows. Ви можете працювати з відкритими документами та редагувати файли прямо на ходу. Проте, перш ніж розпочати створення нових проектів, вам доведеться зареєструватися.

Так як макет сторінки нагадує звичайну настільну програму, працювати з ним досить легко навіть новачкам. Інструменти підтримують такі методики програмування, як C++, C# та Visual Basic. Загалом Compilr має стати запасним додатком для тестування та налагодження вихідного тексту.

На закінчення

Кількість комп'ютерів, з'єднаних між собою, зростає, тому розробникам стає простіше працювати в браузері спільно. Нові технології з'являються в рамках місцевих програм, і хто знає, як далеко це зайде.

Сподіваюся, що наведена в нашій статті колекція інструментів для тестування кодів змусила вас задуматися про сучасний простір для розробки. У наш час нічого не варто за лічені хвилини з'єднати HTML/CSS веб-проект і отримати невелике демо-відео. Зверніть увагу, що ці інструменти є лише для того, щоб допомогти вам у процесі створення фінального продукту.

Перевіряє 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/

Перевірка контенту на унікальність

У безкоштовній версії показує до 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/

Перевірка доступності для людей з обмеженими можливостями

Сервіс перевірки сторінки для людей з вадами зору. Доступний on-line та у вигляді плагіна для 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

Freeware інструмент для перевірки битих посилань. Для роботи необхідно встановити його на власний комп'ютер. Рекурсивно сканує сайт, робить звіти, може бути корисним для складання карти сайту.
http://home.snafu.de/tilman/xenulink.html

Перевірка перелінкування та заголовків сторінок

Сканує до 500 сторінок сайту у безкоштовній версії. Перевіряє кількість зовнішніх та внутрішніх посилань. Виводить інформацію про проскановані сторінки: вкладеність, коди відповіді, назви, мета інформації та заголовки.
http://www.screamingfrog.co.uk/seo-spider/

Перевірка структури посилань і ваги внутрішніх сторінок

Програма сканує сайт, будує матрицю внутрішніх посилань, додає зовнішні (вхідні) посилання із заданих URL і на підставі цих даних розраховує внутрішні ваги сторінок сайту. Програма може бути використана для знаходження зовнішніх посилань для списку URL сторінок сайту.

Перевірка кодів відповіді сервера, видимості сайту пошуковими роботами, технічних характеристик сайту Перевірка HTTP заголовків та відповіді сервера, видимості сторінок для роботів

Перевіряє коди відповіді сервера, прогнозує швидкість завантаження сторінки в залежності від обсягу в байтах її даних, показує вміст html тега head, внутрішні та зовнішні посилання для сторінки, вміст сторінки очима пошукового робота.
http://urivalet.com/

Перевірка кодів відповіді сервера. Дає можливість перевірити редиректи (коди відповіді 301, 302), заголовок Last-Modified та ін.
http://www.rexswain.com/httpview.html

Показує обсяги та вміст даних, що передаються під час завантаження сторінки.
http://www.websiteoptimization.com/services/analyze/

Перевіряє редиректи, використання атрибуту canonical, мета теги, деякі аспекти безпеки сайту. Дає рекомендації щодо покращення завантаження сторінок.
http://www.seositecheckup.com

Перевірка інформації про домен та IP адресу

WHOIS-сервіс центру реєстрації доменів RU Center. Дає інформацію по IP адресам та доменам по всьому світу. Іноді зависає.
https://www.nic.ru/whois/?wi=1

Служба Whois від РосНДІРОС (RIPN). Дає інформацію для доменів у зоні RU та IP адрес з бази RIPE (Європа).
http://www.ripn.net:8080/nic/whois/

Визначає, де у домену хостинг та також показує IP адресу сайту.
http://www.whoishostingthis.com

Перевірка чи не ввімкнено IP адресу в чорний список для розсилки email.
http://whatismyipaddress.com/blacklist-check
http://ua.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

Перевірка швидкості завантаження сайту. Надсилає звіт на email. Має платні послуги моніторингу доступності сайту.
http://webo.in

Перевіряє швидкість завантаження сторінок сайту.
http://www.iwebtool.com/speed_test

Перевірка індексації та відображення сайту пошуковими системами Видимість сайту в пошукових системах

Сервіс показує ключові слова для сайту, за якими він знаходиться в ТОП 20 (першій двадцятці) видачі Google у часі. Дані про пошуковий та рекламний трафік.
http://www.semrush.com/

Положення в ТОП50 yandex та Google. Тиц сайту та PR головної сторінки, наявність у важливих каталогах, видимість у топі за ВЧ запитами.
http://pr-cy.ru/

Перевірка банів та рівня довіри до сайту

Перевірка трастовості сайту. Сервіс, який стверджує, що він вимірює траст для Яндекса (перевірити все одно ніхто не може).
http://xtool.ru/

Перевірка накладання фільтрів Панда та Пінгвін від Гугл. Сервіс дозволяє візуально визначити, чи падав сайт у дати апдейтів Панда і Пінгвін.
http://feinternational.com/website-penalty-indicator/

Перевірка Page Rank сторінок сайту (при копіюванні URL в інструмент потрібно стерти останню літеру, а потім написати заново).
http://www.prchecker.net/

Перевірка історії розвитку сайту

Показує історію розвитку сайту та дає можливість подивитися скріншоти старих сторінок.
http://www.archive.org/web/web.php

Історія позицій сайту в ТОП Google (ключові фрази, сторінки, заголовки), показників PR, ТІЦ, Alexa Rank, числа зворотних посилань для популярних сайтів.
http://SavedHistory.com

SEO плагіни для перевірки сайтів

SEO Doctor – додаток до Firefox. Показує посилання на сторінці та дає зручний інтерфейс до різних SEO сервісів.
http://www.prelovac.com/vladimir/browser-addons/seo-doctor/

SeoQuake – додаток до Firefox. Показує найважливіші характеристики сайту: ТІЦ, 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

Показує кількість лайків (plusone) у Google+. Можна вводити відразу список URl, що перевіряються.
http://www.plusonechecker.net/

Facebook Graph API Explorer SharedCount

Показує популярність у Твіттері, Google+, Facebook, LinkedIn, Pinterest, Delicious, StumbleUpon, Diggs.
http://sharedcount.com

Cool Social

Показує популярність першої сторінки сайту у Твіттері, Google+, Facebook, Delicious, StumbleUpon. Для російських сайтів дані іноді неправильні.
http://www.coolsocial.net

Social-Popularity Social Crawlytics

Сканує сайт та формує звіти "Shares" основних зарубіжних соціальних мереж для цих сторінок. Реєструє користувачів через акаунт у Twitter. Звіти можна побачити вже наступного дня.
https://socialcrawlytics.com

Перевірка сайту на віруси Dr.Web

Перевіряє заданий URL на підозрілий код, показує скрипти, що підвантажуються, і результати їх перевірки.
http://vms.drweb.com/online/

Virus Total

Перевіряє URL-адресу на віруси 30 сканерами.
https://www.virustotal.com/#url

Alarmer

Система захисту сайту від вірусів Щодня сканує файли сайту та надсилає звіт про їх зміни через email.



Як ще дивно не здавалося, але ще існують користувачі, які відключають JavaScript . І більшість Web-майстрів просто "забивають" на них, однак іноді хочеться дати пораду, щоб користувач включив JavaScript . І ось як зробити перевірку: "Чи включений JavaScript" і якщо ні, то вивести рядок з проханням включити, я розповім у цій статті.

Код, наведений нижче, необхідно розмістити всередині тега body :

document.write("У Вас включений JavaScript!");

У Вас вимкнено JavaScript...

Трохи поясню цей код. Якщо у користувача JavaScript включено, то метод write() спрацює і виведе рядок. Якщо ж JavaScript вимкнено, весь тег script буде проігнорований. Однак далі йде тег noscript . Цей тег містить елементи, які будуть показані браузером, якщо JavaScript вимкнено. Тобто, вміст тега noscript показується, коли відключений JavaScript , а коли включений, то користувач noscript не бачить.

Саме таким нехитрим чином Web-майстри часто пишуть: " Увімкніть, будь ласка, JavaScript", або виводять якісь красиві картинки з аналогічним проханням, або ще щось, адже всередині тега noscript можна розміщувати будь-які HTML-теги. І тепер Ви можете застосувати отримані знання і на своєму сайті, адже не секрет, що зараз не так просто знайти сайт, який би взагалі не використовував JavaScript.