Найти исходный путь к исходному файлу из элемента inspect в инструментах разработки - PullRequest
Новая
       57

Найти исходный путь к исходному файлу из элемента inspect в инструментах разработки

0 голосов
/ 25 октября 2018

Я пытаюсь добавить доступность для большого веб-приложения, созданного с помощью веб-пакетов и веб-пакетов.Это требует возврата к исходным файлам из приложения.Есть ли способ узнать, из какого файла исходно пришел код?Проверка элемента и просмотра источника - это хорошо, но я не могу найти путь к исходному файлу, из которого был сгенерирован код.Есть ли способ сделать это в инструментах разработчика (Chrome или Firefox Developer Edition), или я застрял с поиском кода в моей папке проекта src для поиска кода, который укажет мне на файл?Это одностраничное приложение, так что это не так просто, как проверка URL.

РЕДАКТИРОВАТЬ: мы также используем babel

РЕДАКТИРОВАТЬ2: измененное имя, чтобы уточнить Я ищу исходный путь исходного кодав файл

1 Ответ

0 голосов
/ 26 октября 2018

для этого вы должны использовать .babelrc и добавить эту строку в файл

"sourceMaps": true после добавления этого в chrome > source tab он покажет все файлы с тем же именем, что и код, и код также будетв es6 или выше (так же, как вы пишете).

пример конфигурации: 

{
  "presets": ["es2015"],
  "plugins": [
    "transform-object-rest-spread",
    [
      "import",
      {
        "libraryName": "lib",
        "libraryDirectory": "./src"
      }
    ],
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "database": "./src/database",
        "localization": "./localization",
        "utils": "./utils"
      }
    }]
  ],
  "sourceMaps": true
}

Дайте мне знать, если у вас есть какие-либо другие проблемы.

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

enter image description here

, если вы хотите открыть файл, просто нажмите cmd + pи поиск имени файла там вы увидите 2 файла с одинаковым именем.Вы должны открыть одну ведьму, у которой нет префикса webpack-internal.

enter image description here

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

...