USB debug with sources / breakpoints



  • According to the Monaca site, it is possible to put breakpoints in source code when debugging on a device via USB.

    How is this done?

    Monaca does not generate source maps so there is no way to step through the original source.

    Please don’t answer with “check the Chrome Dev Tools documentation”.

    I know how to inspect the device in Dev Tools. The problem is that all I can see is the transpiled app bundle, not the original source.

    Thank you.

    0_1497596243096_Screenshot_20170616-095230.png

    Re: LocalKit Debugger Chrome Dev Tools - How to add breakpoints to source?


  • Monaca

    @ephraimt I found an issue in the webpack dev configuration. We are currently using eval-source-map to generate the source map, but it seems that it’s bugged (breakpoints can be added but the execution does not stop). Check the following issue in the official Webpack repository.

    To fix it and to be able to debug, open your /projectName/webpack.dev.config.js file and change

    devtool: 'eval-source-map',

    with

    devtool: 'inline-source-map',

    It will fix the issue (I made the screenshot with a Vue template, but React templates work as well):

    0_1498624377830_Screen Shot 2017-06-28 at 13.24.11.png


Log in to reply