The tutorial of angular2 with dart never actually uses a real server, always pub serve.
How can I debug my dart code when using a real server like NodeJS? Atm I'm just getting errors like a.b.Y is not defined(in the browser), which is completely useless.
Is there some kind of source mapping for dart2js?
Ok after building with pub build --mode=debug. The dart source is available in chrome dev tools (it shows "source mapped from main.dart.js" for all my dart files. Breakpoints are not stopping tho.
Sounds like the problem I had with another Dart library when I tried running in another server via NGINX. Is your pubspec.yaml properly set up?
My issue was that I wasn't using the transformers or entry_points section of the pubspec.yaml which generates definitions of start up classes.
https://stackoverflow.com/a/38284430/174368
Is your pubspec.yaml similar to the Dart Angular2 example below?
https://angular.io/docs/dart/latest/quickstart.html#!#add-config-files
Also make sure you serve the build directory via nodejs because it'll edit your index.html put it in the build directory and add automatically other link/script lines to include other files.
This might also be part of the reason you can't see your breakpoints. That happened to me too.
Related
I've searched throughout google about this question and I had no success...
I want to work on a serverless plugin fix, but I don't know how to attach the process to debug the code.
Currently, I'm using vscode and the plugin was developed using nodejs + typescript.
Does anyone have any tip or article explaining how to do that?
As every other process, that you want to debug, you need to run it and somehow connect the debugger to it.
You need to remember, that Serverless Framework is written in JS/TS, so it runs in Node.js. So you can debug it quite easily, if you are developing your Lambdas in Node.js, as it's quite common environment.
How to do it using Jetbrains/Webstorm/IntelliJ
Go to your node_modules directory and find the source code of the plugin, that you want to debug.
In the source code place the breakpoint.
Now Create a new "Run configuration" in IDE for NPM, that should be similar to mine:
4. Make sure you've chosen the correct package.json!
5. Now simply start debugging, like you normally do, but choose the run configuration, that you've just created.
In my example I'm using package script from package.json, but it could be also any other script, that triggers serverless deploy or serverless print in the end.
And that's it! Breakpoints should be triggered normally, like when you debug your own JS code.
Is is possible to debug a wasm module through node?
I am using vscode and compiling with emcc -g4 --source-map-base. Putting a breakpoint in the C source file is ineffective. Trying to debug with node inspector node --inspect through Chrome doesn't allow me to use breakpoints either, although it is possible to debug wasm modules from regular web pages in Chrome.
I am using nodejs v10.13.
WebAssembly Source Maps is supported by both Firefox Developer Edition (in screenshot) and Chrome 71.
What you forgot is, to include a path to the source map. For example:
emcc -g4 --source-map-base http://localhost:8000/
Every source files path is prefixed with http://localhost:8000/ with this option. So replace this with your source directory.
So, I managed to get something working. I installed:
Node v11.4
Chrome beta 71 (because of this)
And launched the node process with node --inspect, for attaching the Chrome DevTools.
Moreover, in my code, instead of doing WebAssembly.instantiate in one shot (supplying directly the bitcode), I do it in two steps: WebAssembly.compile first, and then WebAssembly.instantiate. As soon as compile gets executed, there are some "wasm" sources being made available in the DevTools. This is the WebAssembly in wast text form, in which breakpoints can be set before it gets executed by instantiate.
But you can't debug from the original C-source files, Chrome DevTools only shows the decompiled wast yet. This feels like the stone age of debugging, but it is still possible to debug.
Edit 2020: This article https://developers.google.com/web/updates/2019/12/webassembly seems to indicate you should now be able to debug in devtools, from the original C source files. I did not try it, though.
I would like to know whether it is possible to have third-party javascript libraries' source code available whilst debugging.
FYI, I use npm/nodejs and the angular CLI (which itself relies on Webpack).
Example libraries (together with their source languages) that I would like to have available during debugging are:
Angular 2 (typescript)
RxJS (typescript)
I guess what I want to achieve is related to configuring source maps.
Any comment or guidance welcome.
edit: Can someone please advise how to configure the angular CLI in order to have angular and RxJS typescript sources available whilst debugging?
Yes, to be able to set breakpoints in source files while debugging, you need sourcemaps. But this is not the thing that can be configured in the IDE, you need to set up your build tools accordingly. The only thing that should be configured on the IDE end is the run configuration - you might need to specify Remote URL mappings for your project directories
To complement lena's answer and as of #angular/cli version's 6.1 is it now possible to output source maps for vendor libraries using the following syntax:
ng serve --source-map --vendor-source-map
It also works for the ng build command.
See also: https://blog.ninja-squad.com/2018/07/27/angular-cli-6.1/
It is then possible to debug third-party libraries using an IDE or the browser.
I recently started to use the new "devtool" module for debugging Node.js in Chrome Dev Tools.
The debugging process was a dream until I tried to use some ES6 code by using require("babel-core/register"); in the entry point of my application.
I could still use the devtool debugger but everything except my "node_modules" files where dumped into the "no domain" folder.
I assume the es6->es5 compiling needs some sort sourcemap to keep the folder structure possible.
Any ideas?
Way late to this but hope this helps someone, here goes.
From my understanding you're trying to use es6 features when running projects using the devtool command to server projects via Chrome Dev Tools?
To do this follow the babel docs on setting up a new project (make sure you have a .babelrc) then server your projects by running
devtool -r babel-register [MY_FILE_NAME.js]
Instead of simply devtool [MY_FILE_NAME.js]
You don't need to add any imports in your app's entry point if you followed the babel docs correctly.
see https://github.com/Jam3/devtool
I have never asked a forum question before so if I'm breaking a rule its unintentional and I'm sorry.
I have a webapp that I am making using scala/lift and jetty in the IntelliJ Idea IDE. I have a javascript debug webapp that I designed for .net frame work although all I used the .net server for was to serve it because it runs strictly in in html and javascript. I want to use my debug tool for pages that are served by the lift/scala/jetty server and I am currently porting it so that it will work on the new server. The problem that I am having is that the html pages in my debug tool import external javascript files like so:
<script type = "text/javascript" src = "jsFile.js"></script>
now this seemed to work at first but when I made changes to the src javascript file they were not happening in the page that was served by lift. I verified this by following the link in the view page source page from the browser and it showed the version of the file before I added it into the project. If I change the name of the file in the file system the IDE recognizes right away that it can't resolve the path to jsFile.js. I have tried serving the pages through the site map as well as dumping my project in the /static directory. I have restarted, browser,ide, server, os. I have rebuilt the project, remade the module and have done a synchronize. I have created a new project from scatch and ran into the same problem. I believe that if I where to dynamically use lift to insert my javascript with JsRaw it would fix the problem but I still want to know why this isn't working in case its something that I'm doing wrong that will rear up bite me again someday. Any thoughts would be greatly appreciated.
In your template, try to enclose your tags with the lift tag with-resource-id
like
<lift:with-resource-id>
<script type = "text/javascript" src = "jsFile.js"></script>
</lift:with-resource-id>
If this does not solve the problem, are you using SBT to build your lift app? If this is the case, you can have one terminal running
~prepare-webapp
which basically watches for changes on scala files as well as html/css/js files and updates the running jetty (which has to be started by sbt as well running:
jetty-run