Уведомление о JavaScript ошибках в адресной строке



    Этот пост адресован тем пользователям Google Chrome, которые хотят быть в курсе того насколько корректно работают сайты которые они открывают.

    Этот пост адресован тем разработчикам, которым не пристало держать консоль браузера постоянно открытой, чтобы не пропустить проскочившую случайным образом ошибку.

    Специально для вас, дорогие мои, а также для себя любимого, я написал Google Chrome расширение JavaScript Errors Notifier. Буду очень рад, если кому-то оно покажется полезным.

    Помимо того, что оно способно ненавязчиво информировать вас о наличии ошибок на странице отображая в правой части адресной строки, оно может также вывести сам текст ошибок — просто кликните по и увидите:



    Исходный код расширения доступен на Google Code.
    Желаю всем приятно пользования! :)
    Поделиться публикацией
    Похожие публикации
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 69
    • +2
      при установке здоровенный красный значок ошибки пугает
      • +2
        Тут просто какую иконку не выбери чтобы отразить суть расширения — всё равно что-то ошибочно-пугающее будет. Ну т.е. не могу же я поставить какую-нибудь иконку типа: image.
        Может вы что-нибудь посоветуете? Разрешение должно быть минимум 128х128.
        • +1
          кусочек скриншота, на котором адресная строка с иконкой
          • +2
            Отличная идея! Так и сделал. Спасибо!
          • +8
            image
        • +7
          А зачем ему все личные данные на всех вебсайтах и вкладки и журнал посещений?
          • +1
            А по-другому никак. Расширению необходим доступ к объекту window каждой страницы, чтобы повесить свой обработчик на window.onerror. Если боитесь, что в расширении зашито что-то «пакостное», то не бойтесь — смотрите исходник :)
            • +7
              Нахрена я этот исходник увидел только :)

              "permissions": [ "tabs", "http://*/", "https://*/" ,"Obey Galactic","Ressurect Dart Veider"]
              • 0
                :))) Ну и я конечно буду очень рад, если расскажите как реализовать такого рода расширения без минимальных «permissions»: [ «tabs», «http://*/», «https://*/» ]
                • +1
                  Бро, да я впервые это вообще увидел, я только в PL/SQL разбираюсь :)
                  • +2
                    Никак. Так и будут пугать людей. Мне кажется можно было бы предупреждение сделать менее страшным.
                    • 0
                      Я думаю им просто стоило бы ввести предварительную модерацию исходников расширений. А то публикуют всё подряд так, что бедные в случае чего должны сами в исходниках копаться и устанавливать приложения на свой страх и риск.
                      • 0
                        * бедные пользователи
                • +1
                  Кстати говоря вы и так можете исходник любого Chrome расширения просмотреть, ещё при установке. Просто откройте страницу расширения, кликните по ссылке Install, дождись пока скачается и далее не нажимая кнопку «Установить», откройте папку загрузок Chrome, переименуйте скачанный файл *.crx в *.zip и уаля — весь код как расширения на ладони.
            • –20
              Мда, далеко еще Хрому до платформы разработчика.
              • –15
                Правда глаз колет? Фанатизм — страшная штука. Объективнее надо быть, объективнее. Ну, или хотя бы разобраться, чем браузер от платформы отличается.
                • +2
                  Да нет. не колет. Просто к чему Ваш комментарий тут-то?
                  Ну и кроме того, стоило-бы развернуто объяснить, почему Вы так считаете?
                  Кстати, если кто и присунул в карму Вам, то это не ко мне.
                  • –1
                    Очевидные вещи приходится рассказывать… :(
                    Из скриншота (и не только), видно, что сообщения об ошибках ну совершенно не информативные. А это половина решения проблемы.
                • +3
                  Вы, видимо, неправильно поняли суть расширения. В хроме (кстати, и в любом другом браузере на webkit) из коробки идет хороший набор инструментов для разработки и отладки.
                  • –6
                    Суть расширения прекрасно понял. Расширение не несет практически никакой пользы. Простому обывателю эти ошибки до одного места, для него это и так темный лес. А для разработчика этого недостаточно. Хороший набор инструментов невозможно свернуть в тонкую панель, можно только отключить.
                    • +6
                      Для разработчика это расширение — повод заглянуть в инструменты разработчика. По моему на большее это расширение и не претендует и с поставленной задачей справляется.

                      Я бы разве что добавил (если вообще реально) ссылочку типа «открыть инструменты разработчика» прямо под списком ошибок… что бы быстро.
                      • –3
                        Странно как-то и непонятно.

                        Итак, берем гипотетического разработчика, который просто серфит сайты. Интересна ли ему информация об ошибках? Скорее всего глубоко пофиг, он сайты смотреть пришел а не копаться в чужом коде.

                        Теперь берем разработчика, который работает над созданием JS-кода в проекте. С какой вероятностью у него будет закрыто окно с консолью? Только у самонадеянных или начинающих. Я без консоли никуда.

                        Вопрос, в каких случаях тогда данный плагин полезен будет?
                        • +5
                          Берем гипотетического разработчика, у которого несколько проектов (заказов и т.д.). Заходит он на один из них (проект уже работает некоторое время) и вдруг видит, что у него ошибка JS, которую бы он без такой нотификации не заметил бы вообще.
                          Ошибки ведь выползать могут не только на этапе разработки, но и после.
                          • –3
                            Удивительно просто, что в продакшин запускают системы без проверки работоспособности.
                            Что с такой нотификацией, что без нее, исправлять нужно причину возникновения ошибки, а не бороться с последствиями. Да, согласен, есть трудноуловимые ошибки, но есть множество способов как от них избавляться:

                            * Делайте больше проверок входящих данных на наличие или правильность структуры. Никогда не надейтесь, что входящие данные будут всегда и в полном объеме.
                            * Дробите сложные куски кода на более мелкие запчаси. Придерживайтесь принципа KISS.
                            * Если используете фреймворки, то изучите досконально документацию.
                            * Не используйте грязные хаки для определенных браузеров. Это потенциальное место для ошибки.
                            * Не используйте жестких привязок и прибивания гвоздиком без острой необходимости. Например, проверка на версию браузера вероятнее всего приведет к ошибке в будущих версиях или для мимикрирующих UA.
                            * Используйте активнее try catch, если сомневаетесь, что где-то что-то все равно может поломаться. Неработающий код лучше чем ошибка, как бы банально это не звучало, но это психология пользователя.

                            Вырабатывайте методологию минимизации ошибок и методологию их отлова еще на этапе разработки, и вам такие инструменты будут ни к чему.
                            • 0
                              А что разве одно другому не мешает?
                              • +2
                                Т.е. я хотел сказать: может у вас просто аллергия на красненькие иконки? Хотите я специально для вас сделаю версию с зелёненькой? :)
                                • 0
                                  В промышленных масштабах еще как мешает. Для вебсайтов пофиг конечно, но не для веб-ориентированных систем.
                                  • +1
                                    Мне кажется вы всё-таки не совсем правильно понимаете предназначение этого расширения, хотя я вроде об этом и написал в первых 2х абзацах топика.

                                    Как бы это вам ещё популярней объяснить…

                                    Вот у вас дверь в квартире может быть стальная, с титановыми затворами по всему периметру — и это всё конечно хорошо, но тем не менее это не отменяет необходимости сверлить в ней дырочку под какой-то жалкий глазок. Можно конечно каждый раз спрашивать: Кто там? Кто пришёл? Но ведь куда проще в глазок посмотреть и не дурить людям голову.
                                    • –1
                                      Данный плагин немножко не подходит под приведенную аналогию. Дверной глазок — это консоль ошибок. А ваш плагин — это детектор движения в этом глазке.
                                • +2
                                  Со всеми вашими пунктиками вы вряд ли напишете код со 100% гарантией отсутствия ошибок или отлова их последствий. Ошибка, например, может заключаться не в самом коде, а в новой версии браузера, где что-то сломалось. Т.е. вы гипотетически не можете знать всех возможных мест поломки. От всего не застрахуетесь.
                                  • 0
                                    Совершенно от всего — нет. Но от 80% случаев можно, при этом потратив дополнительно на разработку всего на 20% больше времени.

                                    Да и читайте между строк :) Там написано — самосовершенствуйтесь, чтобы допускать как можно меньше ошибок.
                          • +2
                            На самом деле обывателю тоже может сгодится. Частенько бывает, что даже популярные сайты выдают JavaScript ошибки. И вот так получается, всплывает ошибка при каком-нибудь AJAX запросе, а простой смертный юзер сидит и не знает, чего это у него формочка не отправляется — то ли инет отвалился, то ли жмёт не туда. Думаете в Internet Explorer первых версиях просто так было такое навязчивое уведомление об ошибках? Как раз нет- специально для того, чтобы юзера информировать, что он с глючным сайтом дело имеет.

                            • 0
                              Тогда, кстати, может сделать в расширении возможность копипастить список ошибок и писать что-то типа «если вы это видите, сообщите разработчикам сайта».

                              Хотя конечно вряд ли обыватели будут ставить это расширение массово. Хотя если бы оно было интегрировано в хром, то цены бы ему не было.
                              • –1
                                Вы не поверите, но пользователи потыцкают на кнопки, не получат результата и, сказав что сайт глючный, закроют его. Все. Никому не интересно читать неведомые сообщения об загадочных и непонятных для обывателя ошибках, окромя разработчиков, которые в этом хоть как-то шурупают.

                                Есть сообщение или нет — уже все равно, искомого пользователь не добился, а это самое главное и важное
                          • +2
                            Не согласен. Сам полжизни работал в FF (вебдев), а с месяц назад решил уменьшить собственную степень комфортности (и не спрашивайте — зачем) и пересел на Chrome. Сначала казалось, что все не очень. А постепенно втянулся))
                            Не хватает пока только некоторых мелочей (типа возможности просмотреть ответ на некоторый запрос в формате HTML — в смысле не код, а так, словно это отображенная страница...). Но и то вполне допускаю, что соответствующие плагины есть.
                            В итоге что-то больше нравится в FF, что-то в Chrome.
                            • +1
                              Да я бы на вашем месте так бы не говорил) встроенный аля фаербаг, консоль, древовидный Dom и его изменение, что еще надо разработчику?)) только не говорите что встроенный ide) + можно делать тесты, смотреть что откуда, исходники инклюдов на страницу не открывая новую вкладку или не перезагружая страницу… Именно по этим немалым причинам я использую хром) хотя в опере тоже есть нечто подобное) а вот в фф уже плагины надо ставить :'(
                            • 0
                              Вопрос немного не по теме: использовать 8-ми символьный indent в javascript удобно?
                              • 0
                                Да-да, мне тоже непривычно, я к двум символам привык как-то исторически.
                                • 0
                                  Ну пусть даже 4, но если использовать 8, то уже после 4 уровней придется постоянно переносы делать (если вообще входить будет код)
                                • +1
                                  Конечно не удобно :) Я вообще считаю, что использование пробелов вместо табов — очень плохая практика. Потому и использую только табы (см. оригинальный текст исходников через SVN checkout, а не через Google Code).
                                  • 0
                                    А! Вот в чем дело-то :)
                                    • 0
                                      Ну я тоже таб жму, только он потом на два пробела заменяется. Оригинальный таб слишком неадекватно ведет себя
                                      • +1
                                        А кому-то не нравится два пробела на таб, а нравится четыре — мучаться теперь?
                                        • –4
                                          А то. Понапридумывали какие-то табы вместо замечательных пробелов.
                                  • +3
                                    Большое вам человеческое спасибо за это расширение. Очень пригодилось!
                                    • 0
                                      Блин, бро, я у себя на сайтике вот чего нашел:
                                      «Unkown JavaScript error»

                                      Это ваще как?
                                      • 0
                                        Да, я знаю. Такое случается с определённого рода ошибками. Это издержки реализации window.onerror в Google Chrome. Сам с таким сталкивался, пока гуглю на тему как это можно пофиксить.
                                        • 0
                                          Впрочем, а консоли хрома-то уже видно ошибку. Хотя, лично мне эта ошибка ни о чем и не говорит. Все равно спасибо!
                                          • +1
                                            Таки вот нашёл, у Chromium открытая бага по этому поводу есть: code.google.com/p/chromium/issues/detail?id=8939
                                        • +2
                                          Отличная идея! Уже ставлю :)

                                          А Вы не искали — может уже issue есть чтоб добавили в дефолтный функционал? Я бы проголосовал за нее.

                                        • 0
                                          Спасибо, очень удобно.
                                          • 0
                                            Ухх) спасибо!) и кстати да, было бы полезно добавить кнопочку для вывода инструментов) и сделайте пожалуйста этот фрейм поменьше) а то полоса прокрутки как не как а немного напрягает)
                                            • 0
                                              Вызывать консоль браузера из JavaScript не представляется возможным, в Chromе для этого нет соответствующих API методов. Зато есть Ctrl + Shift + J :)

                                              А какой именно фрейм поменьше сделать, уточните?
                                              • 0
                                                s1.ipicture.ru/uploads/20110317/mV0TpBS7.png
                                                вот этот) сделать переносы просто)
                                                • 0
                                                  Исправил.
                                                  • 0
                                                    Но только я сделал не через переносы, а через overflow-y: hidden; overflow-x: auto; Через word-wrap: break-word; не получилось впихнуть, там из-за него popup по всей длине почему-то растягивается. Я вообще в CSS/HTML не силён.

                                                    Может у вас получится стили так прописать, чтобы и word-wrap: break-word; был включен, и ширина/высота под размеры текста подгонялась? code.google.com/p/javascript-error-notifier/source/browse/trunk/popup.html

                                              • 0
                                                Спасибо, удобно!

                                                А можно ли добавить ссылку на строку в коде, как в консоли? Когда кликаешь и переходишь в исходный код на строку с ошибкой.
                                                • 0
                                                  Сделал.
                                                  • 0
                                                    Спасибо! А можно так, чтобы подсвечивалось в developer tools, как когда кликаешь в консоли? Это имел в виду.
                                                    Developer tools
                                                    Хотя так тоже нормально :)
                                                    • 0
                                                      Такое пока даже чисто технически невозможно реализовать :)
                                                      • 0
                                                        Понятно :)

                                                        Думал раз в хроме такое есть, то можно и в расширение добавить такую функцию :)
                                                • 0
                                                  Cпасибо!
                                                  • +2
                                                    Эх, валидатор не сделаете заодно? В смысле, чтобы он проверял страницу на соответствие w3c. Все подобные плагины забанены за слишком частое обращение к сервам валидатора, надо чтото локальное, как сделано у Фаерфокса
                                                    • 0
                                                      Посмотрю насколько это сложно, и если будет свободное время, то попробую реализовать.
                                                      • +1
                                                        HTML Validator не забанен
                                                      • 0
                                                        Спасибо, очень полезное расширение.

                                                        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.