Depuración en el inspector web de Safari, cuando se usa un cargador de módulos como SystemJS

121

Estoy creando una Ionicaplicación usando es6 modules, TypeScripty SystemJScomo un cargador de módulos. Esta es mi configuración:

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>

script de ejemplo (TypeScript):

import {IConfig} from "./app-config";

export class ConfigLoader {
    ...
}

Todo funciona muy bien en Chrome. Sin embargo, al depurar usando el Inspector web de Safari, no puedo colocar ningún punto de interrupción en los scripts porque Web Inspector solo muestra los scripts que se cargan directamente desde el HTML (a través de etiquetas de script), y no los scripts cargados por XHR (en mi caso, por SystemJS) . Esto significa que no puedo depurar mis propios scripts, lo que por supuesto es inaceptable.

Traté de solucionar esto usando SystemJS como antes, pero también colocando las etiquetas de script en el html, así:

<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>

Sin embargo, esto no funciona, ya que SystemJS no parece feliz con esto:

Llamada de System.register no válida. Las llamadas anónimas a System.register solo pueden realizarse mediante módulos cargados por SystemJS.import y no mediante etiquetas de script.

¿Cómo utilizo SystemJS y al mismo tiempo tengo la capacidad de depurar en Safari? Estoy buscando una solución un poco más sofisticada que 'poner una declaración de depuración en cada script' ...

— fikkatra
fuente

Esto puede parecer un consejo extraño, y dado que la pregunta ha estado abierta desde el 11 de enero, le aconsejaría que tal vez se sumerja en el paquete web. He estado leyendo SystemJS, pero no tengo la sensación de que cubra sus necesidades.

— DevNebulae

Parece que si no puede cargar el script en el html como lo estaba haciendo, no tiene suerte. Chrome parece ser el único navegador que admite esto, como has visto.

— The Muffin Man

Posible duplicado de ¿Cómo depurar JavaScript cargado dinámicamente (con jQuery) en el depurador del navegador?

— Mikayla Maki

use la debuggerpalabra clave JS

— Kamil Kiełczewski

@ KamilKiełczewski La pregunta establece explícitamente 'Estoy buscando una solución un poco más sofisticada que' poner una declaración de depuración en cada script '...'

— fikkatra

Bueno, tal vez pueda usar algún IDE como WebStorm con un depurador sólido para Web y Node.

Ejemplos:

Puede ver más sobre el depurador WebStorm aquí .

Algunas alternativas para WebStorm:

Átomo (libre)
Intellij IDEA (comunidad: Gratis)
Código de Visual Studio (gratuito)
...

PD: desarrollo aplicaciones Ionic y React con WebStorm: D

— Olaf
fuente

He estado tratando de ingresar a Webstorm, pero tengo tantas características útiles proporcionadas por el sistema de extensión en VS Code que Webstorm no tiene, es difícil dar el salto.

— Stephen M Irving

¿Ha investigado el uso de un depurador remoto, como https://github.com/google/ios-webkit-debug-proxy .

También hay ghostlab, aquí hay un buen artículo sobre cómo comenzar https://css-tricks.com/using-chrome-devtools-to-debug-javascript-in-any-browser-with-ghostlab-2/

— Rexfordkelly
fuente

-4

escribir en la palabra clave del archivo js debuggery abrir inspect elementen el explorador

al actualizar la página y el modo de depuración ...

disfrútala ;-)

— Hamed Najafi
fuente

La pregunta dice explícitamente "Estoy buscando una solución un poco más sofisticada que 'poner una declaración de depuración en cada script' ..."

— fikkatra