I build and run my typescript application by Grunt and connect(grunt-contrib-connect) and livereload plugins. While grunt compile .ts files, it also generate sourcemap. My application is oppening on google chrome. How can I remotely connect by Intellij Idea to this application that was run by Grunt and oppened in Chrome for perform debug?
This post is my last hope, that it is possible. Thanks
create a new javascript debug run configuration
in URL field, specify the URL of your client app (http://localhost:9001/index.html or whatever it looks like)
if your local project structure doesn't exactly match the app structure on server (for example, static files are served from <project_root>/public folder), specify remote URL mappings (see http://confluence.jetbrains.com/display/WI/Starting+a+JavaScript+debug+session#StartingaJavaScriptdebugsession-Startingadebugsessionwhenusingadifferentwebserver)
that should be enough... Start grunt, and, when the server is up and running, debug the configuration above
Thank you. I found solution.
First of all, I need Jet Brains extension for Chrome.
I need to make configure debug mode "JavaScript debug" and specify URL that grunt will run and open application.
Run Grunt task that build and open application in browser.
Run debug mode that just reload same page under debugger already.
Don't forget enjoy it.
Since I use typescript, ability to debug in IDE was very important.
Related
I'm trying to enable vue-devtools in Google Chrome. But I cannot enable it. I'm using vue.js inside the Laravel application.
My server runs using php artisan serve command.
I was seeing the error message in this question's title and this solution worked for me:
Add Vue.config.devtools = true to the file where you create the Vue instance (main.js for me).
Note that, as mentioned in this answer, you need to put the Vue.config.devtools = true line before you create your store in order for the Vuex part of the devtools to work. If you're creating your Vuex store in a separate file (e.g. store.js), you may need to have the Vue.config.devtools = true line in both your main.js file as well as the store.js file.
Below is what the changes looked like in my project:
If the page uses a production/minified build of Vue.js, devtools
inspection is disabled by default so the Vue pane won't show up.
To make it work for pages opened via file:// protocol, you need to
check "Allow access to file URLs" for this extension in Chrome's
extension management panel.
I had to restart the chrome, and it worked :-)
If your using CDN; make sure your not using a production (minified) build of the library.
Use: https://unpkg.com/vue#2.4.4/dist/vue.js
Instead of: https://unpkg.com/vue#2.4.4/dist/vue.min.js
You might need to do Ctrl+Alt+I for it to show up the first time. (Source)
Updated Aug 2022
So apparently as #kissu said, the answer below causes the released code to be an unoptimized one. This might be different than what you want if you want to check production code while being able to check Vue Dev Tools.
Just be aware of it. Unless you don't mind checking the released code in an unoptimized bundle, then the following script is fine. If you don't like the Vue.config.devtools value being static, it might be time to consider env variables or something similar.
Here's how to setup Environtment Variables in Vue
Alternative answer for Vue CLI 3.x
Besides what #NathanWailes has said, this is an alternative which allows the Dev Tools to be available through scripts instead of writing it in your main Vue entry (which is usually main.js or index.js).
You can do this by simply adding this script to package.json
scripts: {
"start:dev": "vue-cli-service build --mode=development"
}
Explanation
This was because Vue.config.devtools are set to false by default in production mode as said by this GitHub Issue. But this has a work around, simply by using --mode=development flag provided in the documentation.
Then you can run using npm run start:dev and check the file in your dist/ folder! ;)
You may use the dev version of vue.js. For example get it here: https://unpkg.com/vue#2.3.2
When using Laravel just make sure you run the proper webpack for your environment for development . Running
npm run watch
should build Vue with debug mode on. Using
npm run production
minifies Vue for production. This will save you having to remember to toggle the debug mode when building for production.
For me Installing latest Vue dev tools - link and enabling 'Allow access to file URLs' in extension settings resolved the issue.
make sure you're running a non-production build of Vue.js. https://github.com/vuejs/vue-devtools/issues/62
Just add into vue.config.js:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
delete package-lock.json, node_modules, run npm i and VueJS Devtool will be working
you could try to set environment variable NODE_ENV to 'development'
(e.g. set NODE_ENV=development on Windows or export NODE_ENV="development" under Linux)
before launching Vue dev server.
In my case for Laravel 9 fresh installation, I forgot to run sail npm run dev.
If you're using Vite you can configure your environment directory via shared options. If you change that and have NODE_ENV set to production you'll receive this message when trying to inspect your app.
I am developing simple website (html, css) and I want to write few tests against it in Protractor.
Is it possible to check that kind of website with Protractor? I have html file on my computer only. Should I run this website locally on server? I don't think I can run test on file directly.
Yes, its possible to open a stand-alone local html file without hosting it on a local server.You have to add this browser.resetUrl = "file:///"in your onPrepare() function and then a browser.get("file:///C:/Users/demo/test.html") would work
There are some good examples #this question - Opening a file with protractor
A common way to do it is to approach it in multiple steps:
build your application
run a local web server from the build directory (I think this is the part you are asking about)
run tests against your app served by the local web server
stop the local web server
Usually, this multi-step process is handled by a task runner like grunt or gulp. We use grunt, grunt-contrib-connect to serve from a directory, grunt-protractor-runner to run protractor from grunt.
I built the Libgdx game with Gradle and success in deployment on localhost. So I move the code into the real server. However, when I open the browser of my game..it seems like the browser reads url (localhost). Nothing appear!! I am wondering if I have to set up more info for javascript to run the game on the real server or in config files somewhere ?
How you build web-server version of your project? You should use this command:
$ ./gradlew html:dist
Results files will be inside folder: html/build/dist
You should copy all files to webroot folder of your vhost.
Structure should be something like this:
assets
html
index.html
soundmanager2-jsmin.js
soundmanager2-nodebug-jsmin.js * - i also download from soundmanager website nodebug version of soundmanager
soundmanager2-setup.js
styles.css
I was programming gwt project few times. For example: http://ciufcia.pl/boomki-nimm2.
If this does not help, please give some logs from webconsole.
I tried out your new feature "xedbug on demand". I stuck to these guides (https://www.jetbrains.com/help/phpstorm/2016.3/configuring-xdebug.html and https://blog.jetbrains.com/phpstorm/2016/06/xdebug-on-demand-for-cli-php-scripts-in-phpstorm-2016-2-eap/).
I see that in the php Server menu when I add the path to the xdebug that PhpStorm recognizes it (the label switches from "not installed" to "XDebugger 2.4.1").
So everything seems to be fine but when I use the debugger via the bug-icon, it never attaches/stops for the breakpoint.
I activated the xdebug-Logfile, but it stays completely empty.
Furthermore I commented everything xdebug-related out in the php.ini.
The xdebug-port is still on 9000 (default).
Any ideas what I can do about it?
Update: I'm using the debugger via phpStorm's "PHP Web Application" and the debug-icon. I'm debugging php files which are executed via an apache vHost.
PS: Checked IntelliJ forum and Stack posts, didn't find anything helpful though...
"Xdebug in demand" option works for CLI debugging only (Run/Debug Configuration of "PHP Script" type; will also work for other CLI-mode configs, e.g. "PHPUnit") be it local or remote.
Quote from the aforementioned introduction blog post:
To use the great new feature, first, you need to disable Xdebug for command line PHP scripts.
That option does not work for web pages served via web browser (e.g. Apache/nginx/IIS) or when just listening for any incoming debug connections (Zero-config approach) where actual debug is initiated outside of IDE.
The reason is very simple: when launching debugger for CLI script, IDE launches your php executable (your configured PHP Interpreter, e.g. php.exe on Windows) with additional parameter (-z: check php --help output or here) that can load such additional extension.
But when you debugging a web page then whole PHP is not controlled by PhpStorm: it's your web server (Apache/nginx/IIS/etc) that communicates with PHP .. and you cannot pass such arguments at this stage.
I've been trying to follow the
Setting Up Stackdriver Debugger for Java applications on Google Compute Engine, but am running into issues with Stackdriver Debug.
I'm building my .war file from a separate build server, then deploying it to my GCE server. I added the agent to the start command via /etc/defaults, and my app appears in the https://console.cloud.google.com/debug control panel. The version I set in the run command matches the revision that shows up in the source-context(s).json files.
However when I click open the app, I see the message that
No source version information was provided by the deployed application
I connected the app's git repo as a mirrored cloud repository, and can browse the source files in the sidebar of the Stackdriver Debug page. But, If I browse to a file and add a breakpoint I get an error that the error "File was not found in the executable."
I have ran the gcloud preview app gen-repo-info-file command, which created two basic json files storing my git repo and revision. Is it supposed to do anything else?
I have tried running jetty using both normal and extracted modes. If I have jetty first extract the war file, I can see the source-context.json filesin the WEB-INF/classes directory.
What am I missing?
https://github.com/GoogleCloudPlatform/cloud-debug-java#extra-classpath mentions
you can update the agentPath showing your WEB-INF/class directory.
-agentpath:/opt/cdbg/cdbg_java_agent.so=--cdbg_extra_class_path=/opt/tomcat/webapps/myapp/WEB-INF/classes
For multiple class paths:
-agentpath:/opt/cdbg/cdbg_java_agent.so=--cdbg_extra_class_path=/opt/tomcat/webapps/myapp/WEB-INF/classes:/another/path/with/classes
There are a couple of things going on here.
First, it sounds like you are doing the correct thing with gen-repo-info-file. The debugger agent should pick up the json files from the WEB-INF/classes directory.
The debugger uses fuzzy matching to find source files, so as long as the name of the .java file matches a file in your executable, you should not get that error.
The most likely scenario given the information in your question is that you are attaching the debugger to a launcher process, rather than your actual application. Without further details, I can't absolutely confirm that, though.
If you send us more details at cdbg-feedback#google.com, we can look more closely at your case to see if we can understand exactly what's happening, and potentially improve our documentation, since it sounds like you followed the docs pretty closely.