1. Начало
  2. Архив
  3. Уеб дизайн и UI технологии
  4. Web Development tools

Web Development tools

23

Ето списък с някои от най-често ползваните програмки и плъгини за уеб (има и линкове - който иска да ги изпробва):

 

Firefox:

  • Firebug - има доста богато  wiki кадето са описани възможностите, има примери и разбира се -  shortkeys

 

​

  • Mozilla Inspector - вграден във Firefox в послените версии - със сигурност версии 10 и 11 го имат. Предимно се тества на тези версии, които имат официална поддръжка - това са Firefox 3.6(до края на Април тази година) и последната излязла версия (версия 11 за сега)

Chrome

 

  • Web Developer - почти като Web Developer tool-а във Firefox. 

 

  • Pendule - препокрива функционалността на web developer

 

IE

  • F12 developer tools - вграден в IE8+. За IE7 се инсталира допълнително. В последната версия на IE - 10 се държи по-прилично, но все още е неудобен за работа ... но няма как - трябва да се свиква и с него

​

​

 

Opera:

Safari:

  • Web Inspector - вграден в браузъра(десен бутон > Inspect Element). Safari & Chrome споделят един енджин за рендване на страниците(webkit). В повечето случаи, ако изглежда добре под Chrome, то и под Safari ще изглежда добре.

Други:

  • ySlow - плъгин на Yahoo. Работи на повечето браузъри. Анализира уеб страниците и предлага как да подобрите бързодействието.
  • Page Speed - плъгин на Google. Също измерва бързодействието и предлага подобрения.
  • Charles - платен, stand-alone. Доста удобен и приятен за анализиране на трафика на страниците.

 

Има още много, но изборените са най-често използваните за уеб разработка.

Ето още няколко интересни, който могат да улеснят работата и не е нужно да имате някакви програми за да пишете на html, css & javascript:

 

  • jsFiddle - on-line tool за уеб разработка.
  • jsBin - online tool
  • cloud9 - on-line IDE - под Windows дебъга работи, но не и под Mac
  • Library Detector - for Firefox. Детектва използваните в уеб страници javascript библиотеки (разбира се с някои условности...)
  • Library Detector - for Chrome    - Аналогично действие като плъгина за Firefox. Поне на мен ми е интересно да разбирам какви библиотеки използват посещаваните от мен сайтове.
    Предстой да го ъпдейтна с няколко подобрения

TODO:  По-късно ще добавя други програмки и плъгини за css и javascript

в Уеб дизайн и UI технологии от ttsvetko (165 точки)
charles developer fiddler firebug pagespeed tools web yslow

Отговори


0

Няма го Pendule за Chrome, който Павел Колев ни показа.

от sass.bg (1212 точки)

0
Функционалността на Pendule се покрива от Web developer tool-a за Chrome, който го има и за Firefox, което е предимство, ако си свикнал да работиш с единя tool под firefox и ти се наложи да минеш на Chrome. Но ще добавя и Pendule.
от ttsvetko (165 точки)
0
Всичко си го има, дори повече от това, което споменават в лекциите. На мен лично най-много ми допадна Firebug. За Opera плъгините са: Dragonfly и Watir http://www.opera.com/developer/tools/ , а за Safari e както за Chrome: Web Inspector https://developer.apple.com/technologies/safari/developer-tools.html .
от georgi.tashev.121 (472 точки)
Зареди още коментари


0
Има ли я тази опция на firebug, както при Pendule, която скрива css-a и остава само html-a, защото се разрових, но не я открих. Благодаря!
от vlady (142 точки)

0
Web Developer toolbar-a за firefox има такава опция. Има линк в поста
от ttsvetko (165 точки)
0
Жив и здрав да си! Стана :)
от vlady (142 точки)

0

Ето ви линк към pendule за тези които не го намират

https://chrome.google.com/webstore/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi

от paveld3 (17458 точки)

1
Искам да попитам тези които ползват Notepad++ ,дали има плъгин за него,който като посочиш хекс кода с мишката да ти визуализира цветът в малко прозорче,както е при Firebug?Mного ми трябва такава опция.
от gibson58 (0 точки)

2

Ето го http://npp.campulka.net/ ... Иначе във Visual Studio 11 е много приятно интегрирано. Отначало се пробвай да не го ползваш обаче това тулче... ще ти е полезно да знаеш как сам да си формираш цветове.

от paveld3 (17458 точки)

0
Мерси, почти по същият начин работи,разликата е ,че в Firebug е достатъчно само да минеш с мишката върху нео и веднага го показва.Но то май няма такъв плъгин,така че и на това съм доволен.
от gibson58 (0 точки)

0

Инсталирах plugin-а "Html Color Plugin for Notepad++", който колегата Павел Колев предложи (вж. отговора над мен), но ми дава следната грешка при работа с него:

Горното съобщение го дава при Windows XP, но същото излиза и при Windows 7. Иначе плъгинът си работи, но при всяко вмъкване на цвят се появява това дразнещо съобщение.

Някой има ли идея от какво може да е и как да се премахне?

от georgi.s.yankov (6219 точки)

0
Създай директорията C:\...\Notepad++\plugins\Config (ако я няма) и дай права за писане в нея от твоя акаунт (в момента само администратора може да пише) Другия вариант е да стартираш notapad++ като администратор, но това не е удобно.
от Yavor Atov (0 точки)
0
Аз съм си администратор. "Създай директорията C:\...\Notepad++\plugins\Config (ако я няма)" - това е първото нещо, което пробвах, преди да попитам във форума и не се получи. Тогава, обаче го пробвах само на Windows 7. Сега реших да го пробвам и на Windows XP, след твоя отговор и проблемът се разреши като създадох папка "Config" :). Вечерта пак ще пробвам на Windows 7, за всеки случай.
Благодаря ти!
EDIT: @Yavor Atov, оказа се абсолютно прав!!! При Windows 7 също се получи, но трябваше да променя и правата на папката "Config" на "full control" за моя user, както ти предложи.
Благодаря ти отново, много ми помогна!!!
от georgi.s.yankov (6219 точки)