Я создаю Ionic
приложение , используя es6 modules
, TypeScript
и в SystemJS
качестве модуля загрузчика. Это моя установка:
tsconfig.json:
{
"compilerOptions": {
...
"target": "es5",
"module": "system",
...
}
}
index.html:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script>System.import('js/app.js')</script>
пример скрипта (TypeScript):
import {IConfig} from "./app-config";
export class ConfigLoader {
...
}
В Chrome все отлично работает. Однако при отладке с помощью Safari Web Inspector я не могу размещать какие-либо точки останова в сценариях, потому что Web Inspector показывает только сценарии, которые загружаются непосредственно из HTML (через теги сценариев), а не сценарии, загруженные XHR (в моем случае - SystemJS). . Это означает, что я не могу отлаживать собственные сценарии, что, конечно, недопустимо.
Я попытался обойти это, используя SystemJS, как раньше, но также разместив теги скрипта в html, например:
<script src="lib/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="js/app-config.js"></script>
... other app scripts
<script>System.import('js/app.js')</script>
Однако это не сработает, поскольку SystemJS это не устраивает:
Неверный вызов System.register. Анонимные вызовы System.register могут выполняться только модулями, загруженными с помощью SystemJS.import, но не через теги скрипта.
Как мне использовать SystemJS и в то же время иметь возможность отлаживать в Safari? Я ищу решение немного более сложное, чем «добавить оператор отладчика в каждый сценарий» ...
debugger
ключевое слово JSОтветы:
Что ж, может быть, вы можете использовать какую-нибудь IDE, например WebStorm, с мощным отладчиком для Web и Node.
Примеры:
Вы можете узнать больше об отладчике WebStorm здесь .
Некоторые альтернативы WebStorm:
PS: Я разрабатываю приложения Ionic и React с помощью WebStorm: D
источник
Вы искали возможность использования удаленного отладчика, такого как https://github.com/google/ios-webkit-debug-proxy .
Также есть ghostlab, вот хорошая статья по началу работы https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/
источник
напишите ключевое слово js файла
debugger
и откройтеinspect element
в проводникепри обновлении страницы и режиме отладки ...
наслаждайся этим ;-)
источник