Console Logger улавя целия изход на конзолата (console.log, console.warn, console.error, console.info) и го показва в плаващ панел директно на страницата. Вижте грешки в JavaScript, дебъг съобщения и предупреждения в реално време, без да отваряте браузърните DevTools. Съобщенията са цветово кодирани според типа и включват времеви отпечатъци и трасировки на стека (stack traces) за грешките.
Отварянето на браузърните DevTools само за да проверите изхода на конзолата заема ценно екранно пространство — особено на по-малки екрани или когато трябва да виждате цялата страница, докато следите логовете. Console Logger предоставя лека алтернатива: плаващ панел, който показва целия изход на конзолата в реално време, насложен върху страницата. Панелът улавя console.log, console.warn, console.error, console.info и неуловени изключения с пълни трасировки на стека. Съобщенията са цветово кодирани (грешки в червено, предупреждения в жълто, информация в синьо, логове в бяло/сиво) и включват времеви отпечатъци за проследяване на това кога се случват събитията. Бутоните за филтриране ви позволяват да показвате само специфични типове съобщения — показвате само грешки при дебъгване на срив или само предупреждения, когато търсите известия за оттеглени функции (deprecation). Панелът е подвижен, с променлив размер и полупрозрачен, така че да не блокира твърде много от съдържанието на страницата.
Съобщенията в конзолата се появяват в реално време, докато се регистрират. Вижте логове за инициализация на страницата, обработка на отговори от API, събития от потребителски взаимодействия и съобщения за грешки — всички те се предават на живо в плаващия панел.
Грешки в червено, предупреждения в кехлибарено/жълто, информация в синьо и стандартни логове в бяло/сиво. Незабавно разграничете критична грешка от рутинно лог съобщение само по цвета.
Грешките в JavaScript включват пълната трасировка на стека (stack trace) с имена на файлове, имена на функции и номера на редове. Кликнете върху препратката към файла, за да идентифицирате точно откъде е произлязла грешката, без да отваряте DevTools.
Бутоните за филтриране в горната част ви позволяват да показвате/скривате специфични типове съобщения: All (Всички), Errors only (Само грешки), Warnings only (Само предупреждения), Info only (Само информация), Logs only (Само логове). Значката с брой върху всеки филтър показва колко съобщения от съответния тип съществуват.
Всяко съобщение показва часа, в който е регистрирано (във формат ЧЧ:ММ:СС). Проследявайте последователността на събитията, идентифицирайте проблеми с производителността (колко време минава между повикването на API и отговора) и свързвайте съобщенията с потребителските действия.
Изчистете всички съобщения, за да започнете на чисто, или ги натрупвайте, докато взаимодействате със страницата. Панелът показва общия брой съобщения и може да бъде минимизиран, когато не е необходим.
Трябва да виждате изхода на конзолата, докато поддържате цялата страница видима? Console Logger ви позволява да следите логовете, без панелът DevTools да заема екранно пространство. Перфектно решение за по-малки екрани или по време на презентации.
Ако вашият JavaScript логва отговори от API, Console Logger ги показва в реално време. Вижте данните от заявката/отговора, без да превключвате между страницата и DevTools.
Някои грешки в JavaScript преминават тихо — без видима промяна в потребителския интерфейс, но с грешка в конзолата. Console Logger ги прави видими на страницата, така че да ги забележите по време на нормално сърфиране.
По време на демонстрация на живо дръжте панела Console Logger видим в някой ъгъл. Ако нещо се обърка, можете веднага да видите съобщението за грешка, без да прекъсвате демонстрацията, за да отваряте DevTools.
Скриптове на трети страни (анализи, чат джаджи, рекламни мрежи) често хвърлят грешки или предупреждения. Console Logger ги улавя, за да можете да следите за изправността на външните зависимости.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Console Logger. Появява се плаващ панел, който веднага започва да улавя изхода на конзолата.
Използвайте страницата нормално — кликвайте върху бутони, навигирайте, изпращайте формуляри. Съобщенията в конзолата се появяват в панела, когато се регистрират от JavaScript на страницата.
Използвайте бутоните за филтриране, за да покажете само грешки, предупреждения или логове. Значките за брой показват колко съобщения съществуват за всеки тип.
За съобщения за грешки разширете трасировката на стека, за да видите файла и номера на реда, където е възникнала грешката. Използвайте това, за да идентифицирате източника на бъга.
Кликнете върху „Clear“ (Изчисти), за да нулирате панела, или деактивирайте инструмента, за да го затворите. На страницата не остава никаква следа.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
