I'm beginner to use webpack though enjoying programming so long time.
I configure it,and make it to output bundle script transpiled to from typescript,coffee-script so on. But I have no knowledge to debug bundled script with chrome dev-tools.I tried to set breakpoint coffee-script mapped chrome dev-tools first,though I thought it might not work,and of course, it didn't work.
How debug ordinarily these script ? Welcome any help.
Edit:
I found why couldn't debug coffee in chrome dev-tools. Webpack loader didn't read all files because of failing preprocess javascript loading at browser. So runtime exits before reading file I want to debug. I can set breakpoint coffee map file. But, welcome any other tips.
Related
I'm current new to a project and I've realized that the javascript files that get edited in an IDE aren't readable in chrome. For example. the following is a code snippet that I have in Intellij.
This is in a file called MNV.js, however opening up the mnv.js file on chrome devtools shows this.
Is there something wrong with the configuration of chrome devtools or is this just how the program is supposed to work? Thanks!
EDIT
This project is also using VUE, so this is the vue configuration.
Webpack sometimes bundles code together in this format for debugging purposes, making the source code difficult to read. You can disable the parsing of the code as a string and the eval shenanegans by turning off devtool processing of the modules.
In your webpack config, add:
devtool: 'none'
Would like to try this Rhino Debugger however having problems
I downloaded latest from here according to doc it says just simply run:
java org.mozilla.javascript.tools.debugger.Main [options] [filename.js] [script-arguments]
however..it's source code, so I probably need to build it first...(unless there are precompiled download out there?). Assuming I need to build it to get the jar file for debugger, I assume just build the build.gradle file at the root dir. Or run gradle tasks build ? When I do that I get error:
Execution failed for task ':checkstyleMain'.Unable to create a Checker: configLocation {C:\rhino\rhino-1.7.8\checkstyle.xml}, classpath {C:\rhino\rhino-1.7.8\buil
dGradle\classes\java\main;C:\rhino\rhino-1.7.8\buildGradle\resources\main}.
So..I'm a bit lost. Been ten years since I've worked with Java, but hopefully I'm missing something simple.
Any experienced Rhino JavaScript devs out there that can point me in the right direction? Should I just stick with using Eclipse? (Had that working, but I'm still curious about this debugger)
Download the latest rhino from the link you provided, at this time it is "rhino-1.7.8.zip". Unzip that and change directory to "rhino1.7.8/lib"; you need the "rhino-1.7.8.jar" in your CLASSPATH. Assuming you are in "rhino1.7.8/lib" that should be in your current folder, and you can then do
java -cp rhino-1.7.8.jar org.mozilla.javascript.tools.debugger.Main
Which should render like
I'm working on a Tomcat WebApp with Servlets, with the Eclipse Project being a JavaScript one. However, I need to get the Java compiler to control the .java files so that I can get the appropriate IDE features.
I've installed a Java perspective and language plugins via Install New Software, and restarted Eclipse. Everything threw errors then, including stuff like import java.io.*;.
I've Cleaned the project and in the meantime checked the Java Build Path in the Project's Properties. It seems to be all correct, using JRE System library [jre1.8.0_101]. After the validation finished I've restarted Eclipse again.
Nothing throws errors now. I've added a contextually nonsense statements of Seriously hello = new What(); where neither Seriously nor What are defined anywhere and it doesn't throw anything.
In fact, removing the semi-colons doesn't throw an error either, as if there was no Compilation overlooking the files at all.
Edit:
So I've deleted everything non-sourcey, and then recreated the project in Eclipse as a Faceted Project. This did not help. I'm thinking that maybe my Eclipse installation is bugged due to my blind installing of plugins.
I've still no clue how to fix this. :(
The source folder needs to include the .java files, otherwise the compiler just ignores them.
You set it at
Project->Properties->Java Build Path->Source tab
I am using IntelliJ 14.1.4 for creating a JavaScript application. For debugging, I fire up a webserver using Gulp. I then fire up the JavaScript debugging and connect with Chrome (via the plugin). I can debug "normal" JavaScript this way but when using source maps (created by browserify), IntelliJ does not trigger the break points anymore. If I use Chrome's debugging tools, everything works as expected but IntelliJ does not seem to being able to translate its break points.
Is there any way to make this work? I have spent quite some time researching the issue and as far as I understand it, IntelliJ supports source maps. Also, I was able to debug GWT generated JavaScript using this approach which uses source maps, as well.
Update: It seems like there is a current issue for this problem. If any workarround is know, I am happy to hear a solution.
The answer below solves the problem. Here is how I set up my gulp build:
bundler.bundle()
.pipe(exorcist('./build/bundle.js.map', null, null, '../src'))
with ./build being my build folder and ../src being the root of the JavaScript source files, relative to the build folder.
The current workaround is to use exorcist to generate external source maps. You can set the base path to evaluate paths from with the -b parameter, more info in their docs.
As an example, here's what my call to watchify looks like:
bin/watchify -d -v -p [tsify --target es5] -t debowerify js/tests/karma/**/*.ts -o 'bin/exorcist -b "js/compiled/" js/compiled/tests.js.map > js/compiled/tests.js'
Be aware that plugins and transforms might output weird paths when piped together; if your sourcemaps don't work, make sure browserify or watchify output the path properly. I once had browserify output "../../js/tests/karma/unit/js/tests/karma/unit/Calculator.spec.ts" instead of "../../js/tests/karma/unit/Calculator.spec.ts", causing my maps to be useless.
I suppose I'm asking about what the proper procedure is.
I'm running Webstorm 7.0.3. I do not have node setup. I'm using the in place hosting on my local machine.
I have written unit tests, and can put a debug breakpoint in the test.js file. When I right-click and 'debug' my karma.conf.js file, it hits these breakpoints fine. Which is great for for basic stuff, but sometimes I need to go line by line inside a service.
Any breakpoints I place inside the service get skipped and ignored.
I have to assume this is is because karma is wrapping my actual script into some proxy file for execution.
How do I step through the service line by line? I feel like I missed something very obvious.
[Update]
#Eitan's comment was what i needed.
I assumed the karma task runner automatically wrapped all source up into the indecipherable un-debuggable non-sense. I never stopped to assume that putting the coverage pre-processor was responsible for it. Commenting the coverage reporter and pre-processor for karma-coverage now allows me to debug my unit tests from the karma chrome instance and from webstorm.
Are using the coverage reporter? It uses instrumented code so I guess you won't be able to debug your original file
You could launch chrome in your karma config and step through your service with dev-tools. I don't know if you can actually do it from within WebStorm because of the exact reason you mentioned (karma server). Just click the big DEBUG button on the upper right of the karma controlled chrome instance and open the scripts in dev-tools