Debugging bundled javascript in WebStorm - debugging

Is there a way to debug a bundled javascript in WebStorm setting breakpoints in the files that are source for bundling, instead of the bundle itself?
I use browserify as bundling package, but I can consider using other ones. The only limitation is that I use grunt as a task runner. Seems there is something that could be a solution here, but it us for gulp. There mentioned vinyl-source-stream as a part of the solution, but I am not sure if it is worth trying with grunt.
What I tried is
using browserify: { options: { debug: true; } }
using mold-source-map and some other related things found here on SO
using uglify as source map generator
some other things that are not worth mentioning
Any one- or two-step things I tried just did not work.
Seems it is too sophisticated to search the way consciously, only try-and-error would work, but I don't have enough time for it.
What I hope to find is a working example of the web storm project where I can set a breakpoint in source js before debugging. But any hint or direction would be appreciated.
Well, if nobody helps me and I find the solution later, I'll surely blog it out as step-by-step instruction. But I am not sure that this is possible due to people who understand more than me in browser debugging told that source map cannot be generated so as to point to the files other that actually executing in browser js engine. So the answer with more detailed explanation why it is not possible can also be accepted.

Related

Compiling and debugging erlang code- for custom ejabberd modules?

This is a very specific and niche question- but something that'll probably help people working on existing codebases.
Current Scenario
We are running ejabberd 18.01 on prod- and we can't really change this right away. Our current setup for running custom modules is this- either modify existing modules from the source code, or make our own custom modules that are compiled using the erlang compiler that's bundled in with the installer from here. We use erlide as our IDE in Eclipse.
We compile the custom files in in erlide, into a separate directory from where our ejabberd .beam files are; and then transfer the files manually from there to the ebin folder in ejabberd. This is done so that we have VCS for our modified module files.
We aren't using rebar3, and I have zero clue as to how to implement in a heavily modified existing codebase without breaking something. Our only legitimate way of debugging is to put loggers at every step of the process, compile, transfer files, and restart the server- which drastically increases dev time.
It is a genuine nightmare to work with, and resources on ejabberd as well as erlang is scarce- we mostly have the docs to go by, and barely any SO questions relevant.
Any suggestions, resources that can help me setup something to help especially for debugging, would be highly appreciated. Maybe something in vscode would be great. Transferring files I've still managed with inotify, but debugging makes me want to tear my hair out. Please help. Thank you.
P.S.- This is all on Ubuntu 20.04, if relevant. Erlang/OTP version - 20.02, erts- 9.2. Please ask for any further clarifications if required.

What IDE to use to start contributing code for CKEditor?

It's my first question here on stackoverflow so please be easy on me.
I've been trying to set up the source for CKEditor so I can start contributing to this editor. I have followed this link: http://docs.ckeditor.com/#!/guide/dev_contributing_code but I got stuck on step 4 as I haven't got the following file: bender.js. I also need something called gruntfile for step 5. Do you know where I can get them from as when I fork https://github.com/ckeditor/ckeditor-dev, the following project does not come with them. Also, what IDE do I need to use to develop code? Sorry, for this question as it might seem a bit stupid but I come from the Java background and Node.js is really new to me, therefore I'm struggling a bit here.
Thanks for any help
There are no requirements regarding IDE, at the end it's all just text.
Regarding your problems: Make sure you're forking ckeditor-dev, and not ckeditor-releases repository. Only dev repository contains all the helpers like gruntfile.
The gruntfile is there so if you cloned CKEditor repository, you must have it.
Then all you need to do is follow up the instructions of CKEditor contribution guide closesly, and you're good to go!

godoc without showing source code

I got several Go projects which is documented compatibly with godoc. We use godoc to share doc and code internally as a doc server without significant problem. However we need more control on opening code when we want to share doc with 3rd party. Is there a way to run godoc in a special mode that showing types and docs but never link to or showing source code?
I've tried
godoc -http=0.0.0.0:8090 -links=false -src=false
but not working, still can link to type definition code. Just wondering if missed sth. Go version, 1.3.
The src file only refers to command line mode, not to server mode, so it won't help you. The way I see it there are a few options:
Rewrite godoc for your needs and use your own fork.
Don't use the server mode, render the docs in command line mode and just create a server out of that.
Better yet (I'm not entirely sure 2 will work) - rewrite the templates a bit so the source code won't be linked. But you'll still need to make sure people who enter the path manually won't see the code so it will require fudging the source templates as well. or...
Maybe the simplest thing - run it behind nginx or a similar reverse proxy, and make sure the /src path in the server is closed to outside visitors, or password protected or whatever. That way your internal team can still use it.
Personally I'd go with 4, it's a couple minutes of work and will be the most robust and flexible solution.

How to find a bug that only happens in the Javascript version of a Dart program?

I've written a program that runs perfectly in Dart but fails to run in the transpiled Javascript version. I suspect it's an infinite loop (because CPU usage goes up). Has anybody experienced such a behavior before? Maybe even more important, how can I find out the problem?
Yes; this is a big part of my day job.
First, understand that you are most likely dealing with a dart2js bug, not a bug in your code. Your immediate goal is to work around the problem. The end goal, though, is to construct a small test case that you can file on dartbug.com.
Checked mode is your friend
If you are really lucky, enabling checked mode will throw an assertion that will point to the problem. If not, you'll need to dig into the JS.
Using pub serve or pub build --mode=debug will give you more readable code. I usually set my pubspec.yaml up like so:
transformers:
- $dart2js:
minify: false
checked: true
(or checked=false if I'm chasing a performance issue). Then running pub build (without any arguments) will produce to desired output.
Produce a smaller use-case
If you can get Angular out of the mix, the Dart Team will have a much easier time debugging. Failing that, generate a AngularDart application that shows the error on page load.
Print statements
Adding print statements in Dart help you understand the execution flow, but also make it easy to search the dart2js output for good places to add breakpoints.
I find that source maps only confuse things and always disable them.
git bisect
Once you have a small enough use-case that triggers on page load, using git bisect to search your history for the breaking change is quick and impresses your friends.
Dart can generate source maps since a while which makes it quite easy to debug generated JS.
With source maps the browsers show Dart code and stack traces when debugging built JS code.
Source maps need to be enabled in the browser (see https://www.dartlang.org/tools/dart2js/ for details) and in the $dart2js transformer (see https://www.dartlang.org/tools/pub/dart2js-transformer.html for details)
You can get readable JavaScript by running dart2js in debug mode. If you are using pub build you need to use pub build --mode=debug.

How do you create a project from scratch using Brunch.io, without using their skeletons?

I couldn't find any Brunch.io skeleton that suited my project and so I tried to start from scratch and create my own. But it wasn't before long that I was only scratching my head instead.
Could someone please explain how to start a new project in an empty folder and integrate it with Brunch, using just the terminal and a text editor?
PLEASE DO NOT USE EXISTING SKELETONS
Ideally I'm looking for a tutorial like this: https://coderwall.com/p/pijtcq, but with more detail at each step.
I suggest to take a look at dead-simple brunch, this is official skeleton which is maximally minimal.
https://github.com/brunch/dead-simple
Maybe still take it and add your own framework, lang plugins and stuff.
Or, you can re-create your own, by following the same path: add bower.json, brunch-config and package.json. That's it, I guess.
Going through the dead-simple skeleton helped me understand how Brunch works but I couldn't fire any of my custom js. But I finally, got it... add this code to the brunch-config file to execute all your js files as expected.
modules:
definition: false
wrapper: false
Not sure why this isn't the default behaviour or why it isn't explicitly mentioned anywhere. I spent ages sifting through the net to get this answer.
Have a look at this part of the documentation:
https://github.com/brunch/brunch-guide/blob/master/content/en/chapter04-starting-from-scratch.md

Resources