Javascript.RU

Исходный код сжатого фрагмента: closure inspector

В этой статье мы рассмотрим, как просмотреть исходный код сжатого фрагмента при помощи Closure Inspector для Firebug, и как адаптировать это расширение под себя.

При сжатии javascript оптимизатор Google Closure Compiler может генерировать source map - файл-карту исходного кода. В этом файле хранится соответствие между фрагментами сжимаемого и сжатого файла.

Closure Inspector - оригинальное расширение для (Firebug). Оно позволяет загрузить файл-карту и исходный скрипт, и затем переходить от скомпилированного скрипта к соответствующему месту в исходном файле.

Это призвано упростить отладку, особенно в режиме "продвинутой" оптимизации, когда Google Closure Compiler агрессивно переименовывает свойства и инлайнит вызовы.

Для начала, нужно подготовить файл-карту исходного кода.

Это делается указанием опции --create_source_map при сжатии.

Для примера, сожмем файл dojo.js, создав файл-карту в C:\sourcemap.

java -jar compiler.jar  --js dojo.js  --create_source_map c:\sourcemap --js_output_file dojo.compiled.js

Если инспектор еще не стоит - нужно его поставить. На момент написания статьи, последняя версия - closureinspector09.xpi.

Скачайте и сохраните на диске xpi-файл. Расширение можно установить, просто открыв (перетащив) файл в Firefox.

Использовать Closure Inspector очень просто. Достаточно открыть любую страничку в Firefox и перейти на вкладку Firebug "Сценарии" (Scripts).

При этом справа будет доступен новый пункт "Source mapping":

Выбираем нужный скрипт. На картинке это pack.2.js, отмечен зеленым.

Кликнув на "Open Local File", открываем локальный файл c:\sourcemap.

Все готово, у инспектора есть source map и исходный скрипт.

Теперь, кликнув правой кнопкой на любом месте сжатого кода, мы увидим пункт "Show Original Source":

При клике на этот пункт Inspector предложит вам указать корневую директорию, где находятся откомпилированные скрипты. В нашем примере это директория, где лежит dojo.js.

Кстати, нажав на выпадающее меню Source Mapping, вы имеете возможность указать корневую директорию таких файлов:

Это полезно, когда откомпилированный файл собран из нескольких исходников, как это обычно и бывает.

При первом запуске, затем появится еще одно диалоговое окно с предложением указать директорию, где будет храниться файл с настройками инспектора. Укажите любую, удобную вам.

После всего этого вы, по идее, должны иметь возможность посмотреть исходный код, кликнув на участок откомпилированного в панели Script.

Однако, обычно этого не происходит, вместо кода вы увидите alert с файлом и номером строки.

Для того, чтобы получить больше, настроим инспектор под себя.

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

Редкатор берется из переменной окружения EDITOR и запускается с указанием файла и строки.

Однако, даже поставив эту переменную на любимый редактор, вы, вполне возможно, получите сообщение о том, что ваш редактор "unsupported" - не поддерживается.

Чтобы разобраться с этой проблемой, нам придется пересобрать расширение под выбранный редактор. Это звучит сложнее, чем есть на самом деле. Весь процесс состоит из нескольких шагов.

  1. Формат расширения - обычный zip. Поэтому разархивируем xpi-файл с Closure Inspector в директорию inspector.
  2. Код, вызывающий редактор, находится в файле chrome/content/inspector/helpers.js. Функция называется clInspector.Helpers.displayFileInIDE. Вот ее код на момент написания статьи:
    /**
       * Displays the given source file in the user's IDE (as indicated
       * by the $EDITOR environment variable) and opens it to the given
       * line.
       *
       * @param {string} path The path of the file to be displayed.
       * @param {number} line The line number to display in the file.
       */
      clInspector.Helpers.displayFileInIDE = function(path, line) {
        if (!clInspector.Helpers.hasEnvVariable('EDITOR')) {
          alert('Original Source File: ' + path + '\n' +
                'Line Number:' + line);
          return;
        }
    
        // Retrieve the editor for the user.
        var editor = clInspector.Helpers.getEnvVariable('EDITOR');
        var editorBinary = editor;
    
        var lastSlash = editor.lastIndexOf('/');
    
        if (lastSlash == -1) {
          lastSlash = editor.lastIndexOf('\\');
        }
    
        if (lastSlash >= 0) {
          editorBinary = editor.substr(lastSlash + 1);
        }
    
        // Handle the supported binaries.
        var arguments = [];
    
        switch (editorBinary) {
          case 'emacs':
            arguments.push("+" + line);
            arguments.push(path);
          break;
    
          case 'vi':
          case 'vim':
          case 'gvim':
            arguments.push(path);
            arguments.push("+" + line);
          break;
    
          default:
            arguments.push(path);
    
            alert('The editor "' + editorBinary + '" is unsupported. The line ' +
                  'number in the file is ' + line);
          break;
        }
    
        // Find the full path of the editor so we can open it.
        var editorPath = clInspector.Helpers.findBinary(editor);
    
        if (!editorPath) {
          alert('Original Source File: ' + path + '\n' +
                'Line Number:' + line);
          return;
        }
    
        // Launch the editor.
        FBL.launchProgram(editorPath, arguments);
      };
    

    Как видите, поддерживаются лишь несколько редакторов. Чтобы добавить новый, достаточно поменять эту функцию.

    Для этого ваш редактор обязан поддерживать в параметрах запуска путь и номер строки. Поддерживаемые редакторы vi(m), emacs, gvim это умеют.

    Легкий редактор SciTe под Windows также может запускаться с такими параметрами. Например:

    SciTE "-open:C:\\Program Files\\SciTE\\SciTEDoc.html" -goto:123
    

    Таким образом, чтобы заработал SciTe, достаточно поменять функцию в файле на такую:

    clInspector.Helpers.displayFileInIDE = function(path, line) {
        
        var editorPath = "c:\\program files\\scite\\SciTE.exe"
        
        var arguments = ['-open:'+path.replace(/\\/g,'\\\\')+'', '-goto:'+line]
        // Launch the editor.
        FBL.launchProgram(editorPath, arguments);
      };
    
  3. Запаковываем xpi обратно. Обратите внимание, в архиве должно быть содержимое директории с расширением, а не сама директория (собственно, как и было до разархивации).
    zip -r inspector.xpi *
    
  4. Теперь открываем новый xpi-файл в Firefox и устанавливаем расширение.
  5. Все, теперь можно просматривать исходный код сжатого фрагмента непосредственно в SciTe.

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


Автор: Гость (не зарегистрирован), дата: 4 декабря, 2009 - 16:21
#permalink

Вторая картинка ( там где мы должны увидеть пункт "Show Original Source") в статье не показывается.


Автор: Илья Кантор, дата: 4 декабря, 2009 - 17:14
#permalink

Поправил


Автор: justicehwrknz807 (не зарегистрирован), дата: 10 января, 2022 - 10:27
#permalink

Very well written post.It is a sign of the times that so many different languages are spoken within the same country. This article is well-written, interesting and informative. Kitchen Design Tacoma Wa


Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 01:15
#permalink

Автор: Гость (не зарегистрирован), дата: 16 апреля, 2022 - 12:54
#permalink

Автор: Гость (не зарегистрирован), дата: 27 июля, 2022 - 12:49
#permalink

I've already read a few of the content - your website, and I thoroughly like your writing style. nytimes wordle


Автор: Fall Guys (не зарегистрирован), дата: 3 апреля, 2023 - 07:48
#permalink

Playing games is fun. With the challenge that it brings, fall guys 3 is a game that people of all ages can enjoy. Try to beat the other people. To win, you have to compete in crowded areas and get through chapters with obstacles.


Автор: kisytd (не зарегистрирован), дата: 15 мая, 2023 - 13:06
#permalink

thanks for sharing!


Автор: Гость (не зарегистрирован), дата: 15 мая, 2023 - 13:07
#permalink

This will not be difficult for all players. All ages can play the drift boss game.


Автор: lewboyer (не зарегистрирован), дата: 14 июня, 2023 - 07:25
#permalink

On sweltering summer days, there is nothing better than finding a nice game to play at home. I strongly suggest badland


Автор: Maddin (не зарегистрирован), дата: 14 июня, 2023 - 08:51
#permalink

awesome I need to know more about playing football legends and watching comfortable movies because they are two of my favorite things to do.


Автор: weysimo (не зарегистрирован), дата: 9 августа, 2023 - 06:50
#permalink

Finding a relaxing indoor activity to enjoy on hot summer days is ideal. I urge you to geometry dash


Автор: JellyMin (не зарегистрирован), дата: 15 августа, 2023 - 15:55
#permalink

Оно позволяет загрузить файл-карту и исходный скрипт, и затем переходить от скомпилированного скрипта к соответствующему месту в исходном файле. kitchen remodeling Belmont


Автор: Binladendie (не зарегистрирован), дата: 5 октября, 2023 - 10:50
#permalink

Positive site spanish dictionary, where did you get the information about this post? I have now read some of the articles on your site and I really like your style spanish to english. Thanks a million and keep up the good work.


Автор: antiguans2000, дата: 8 декабря, 2023 - 16:02
#permalink

The launch parameters' path and line number must be supported by your editor. This is possible with supported editors vi(m), emacs, and gvim. | texas factoring company


Автор: Basketball Stars (не зарегистрирован), дата: 26 декабря, 2023 - 07:35
#permalink

Are you a fan of basketball? Do you enjoy playing online games with your friends or other players from around the world? If so, you might want to check out basketball stars, a multiplayer basketball game that lets you show off your skills and compete for glory.


Автор: grade calculator (не зарегистрирован), дата: 27 декабря, 2023 - 11:48
#permalink

This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free Moto x3m


Автор: Kevin Sharpe (не зарегистрирован), дата: 4 января, 2024 - 07:17
#permalink

Благодаря вашему сообщению я смог просмотреть исходный код сжатого фрагмента с помощью Closure Inspector для Firebug. Информация, которой вы делитесь, очень применима. doodle baseball


Автор: Гость (не зарегистрирован), дата: 22 января, 2024 - 05:34
#permalink

The information you share is great, please continue to write about this topic regularly moto x3m


Автор: writableisland (не зарегистрирован), дата: 24 января, 2024 - 04:16
#permalink

My wish is that there is much more to come. We value your input very much.


Автор: betterwound (не зарегистрирован), дата: 29 февраля, 2024 - 12:54
#permalink

The knowledge you offer is fantastic. Please continue to write about this issue on a regular basis. dordle


Автор: antiguans2000, дата: 11 апреля, 2024 - 11:20
#permalink

Our mission is to satisfy every client by offering outstanding service and top-notch craftsmanship. We take great satisfaction in our residential home painting meticulous attention to detail and our dedication to doing the task correctly the first time.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
2 + 3 =
Введите результат. Например, для 1+3, введите 4.
 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние комментарии
Последние темы на форуме
Forum