I have a Angular2/typescript app I am developing in VSCode. I use Gulp to build the typescript files and gulp-sourcemap to create map files. Attaching/launching chrome works well after some tinkering with the chrome debug extension for VSCode, but I cannot get the breakpoints to hit. I run the website with "dnx web", but I don't think that should matter.
My folder structure is like this:
project/wwwroot/index.html
project/wwwroot/app/myfile.js
project/wwwroot/app/myfile.js.map
project/scripts/myfile.ts
My launch.json looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8001/portfolios",
"runtimeArgs": [
"--new-window", //Open in new window
"--user-data-dir=C:/temp/",
"--remote-debugging-port=9222"
],
"webRoot": "${workspaceRoot}/wwwroot",
"sourceMaps": true
}
]
}
and my gulp build task looks like this:
gulp.task('ts', function (done) {
var files = gulp.src(tsToMove)
.pipe(sourcemaps.init())
.pipe(ts(tsConfig), undefined, ts.reporter.fullReporter());
return files.js.pipe(sourcemaps.write(".",{sourceRoot: '../scripts'}))
.pipe(gulp.dest('scripts'));
})
I have verified that maps files are generated and stored in the same folder as the js files. when building.
Thanks for any hints.
Setting the workspace location to the location of my typescript files, and not my build files, worked for me.
Unverified Breakpoint (my compiled file location)
"webRoot": "${workspaceRoot}/build/client"
Working Breakpoint (my ts file location)
"webRoot": "${workspaceRoot}/client"
I feel I should mention that I am using the Debugger for Chrome extension
So I've been messing with this for hours and finally got it working: RVCA18 was right on with his answer:
You need to make sure that webRoot is set correctly, and correctly will depend on where you are running dnx from. If from your 'project' folder, then that's your actual webRoot.
You can also use your sourcemap file. If you open the file, it has a structure something like this:
{"version":3,"sources":[],"names":[],"sourcesContent":[]}
Find the sources prop which is an array of all of your source files. For example, if I search for one of my class names, I find the source to be something like: "webpack:///./app/components/TargetCard.js". I am using webpack and have a dir structure like below (simplified):
main
app
dist
which means that my webRoot as far as VSCode is concerned should equate to the dir one level above 'app', or 'main'. This is also where I run webpack from, so it makes sense. If I open the 'main' folder in VSCode, then my ${workspaceRoot} will also be 'main', so to have the debugger find my files I should set webRoot to simply be ${workspaceRoot}.
If you are using the debugger for chrome extension I would check that you are running chrome with remote debugging?
I was able to get mine working after I started running chrome with remote debugging.
from https://code.visualstudio.com/blogs/2016/02/23/introducing-chrome-debugger-for-vs-code
For now, Chrome needs to be started with remote debugging enabled, and only supports one concurrent connection. This means if you open up DevTools inside Chrome, the connection to VS Code will get terminated by Chrome. This is slightly annoying, and we hope this issue will be fixed sometime soon.
To do this i have a batch file that opens chrome with this command.
start /d "C:\Program Files (x86)\Google\Chrome\Application" chrome.exe --remote-debugging-port=9222
I totally agree with RVCA18. It's about the webRoot Setting that was wrong.
I had VS-Code ${workspaceRoot} pointing to a subfolder (just because I opened the project like that and had no script in the top-level folder). Since the index.html that is launched is in the top level folder I had to set the following Option in launch.json
"webRoot": "${workspaceRoot}/.."
For me, the problem occured in Visual Studio Code, using addons "Debugger for Chrome" with "Live Server".
I got it to work with the following settings:
Live Server's settings.json:
"liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome --user-data-dir=C:/tmp --remote-debugging-port=9222",
launch.json:
"configurations": [
{
"name": "Attach to Chrome",
"port": 9222,
"request": "attach",
"type": "pwa-chrome",
"url": "http://127.0.0.1:5500/${relativeFile}",
"sourceMaps": true,
"webRoot": "${workspaceFolder}"
},
Related
I'm trying to set up a local dev environment for a Silverstripe build which was set up by someone else. I'm not all that familiar with Silverstripe so am a bit lost as to how to do this. I can't share much of the code for security reasons but I can see that gulp is used for watching the local changes. Happy to provide what ever else is needed to get this going just cant provide specifics obviously.
Here is what I've done so far:
installed MAMP
cloned Repo to the htdocs folder within MAMP
run composer install in the root and npm install in the theme directory
turned on the MAMP server - am redirected to localhost:8888
have gone to the localhost:8888/repo and am shown the error - cannot find index.php
When I run gulp the browser opens a localhost:3000 page but it never completes loading, rather it hangs.
I understand the index.php error but the previous dev had this running with the current set up so I am hoping to not move anything around just yet. There is a 'public' folder with an index.php file in it if there is a way I can tell the server to look here for it.
composer.json Contents:
{
"name": "silverstripe/installer",
"type": "silverstripe-recipe",
"description": "The SilverStripe Framework Installer",
"require": {
"php": ">=5.6.0",
"silverstripe/recipe-plugin": "^1.2",
"silverstripe/recipe-cms": "4.2.1#stable",
"silverstripe-themes/simple": "~3.2.0",
"loeken/cryptocompare-api-php-wrapper": "dev-master",
"zendesk/zendesk_api_client_php": "^2.2",
"intercom/intercom-php": "^3.2",
"tractorcow/silverstripe-fluent": "^4",
"silverstripe/googlesitemaps": "dev-master",
"ryanpotter/silverstripe-cms-theme": "^3.3"
},
"require-dev": {
"phpunit/phpunit": "^5.7",
"deployer/deployer": "^6.2",
"lekoala/silverstripe-debugbar": "^2.0"
},
"extra": {
"project-files-installed": [
"app/.htaccess",
"app/_config.php",
"app/_config/mysite.yml",
"app/src/Page.php",
"app/src/PageController.php"
],
"public-files-installed": [
".htaccess",
"index.php",
"install-frameworkmissing.html",
"install.php",
"web.config"
]
},
"config": {
"process-timeout": 600
},
"prefer-stable": true,
"minimum-stability": "dev"
}
Any suggestions of what to try next would be greatly appreciated. Nothing I can find online seems to mention using gulp and MAMP in tandem - unsure If I'm just understand their purpose incorrectly.
Cheers
I need '50 reputation' to comment so I will instead reply as an answer.
It sounds like you are using SilverStripe version ^4.1, since you got the 'public' folder.
Do the following:
Make sure you got a .htaccess file in the root (outside public folder) which redirects all requests to the public folder:
(root .htaccess)
RewriteEngine On
RewriteRule ^(.*)$ public/$1
Run composer vendor-expose in the root to expose all files which should be accessed by the visitors, (custom css, js, images etc...). The files & folders that gets exposed are specified in the composer.json file under "expose": [...]. The files gets copied over to the public folder
Is there any way we can launch the chrome window with all the extensions installed on chrome?
{
"version": "0.2.0",
"configurations": [{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://site.example.com/",
"webRoot": "${workspaceFolder}"
}]
}
Setting the userDataDir property in the launch config to false will allow you to launch Chrome using your personal user profile. However, I would suggest keeping your debugging environment sandboxed and separated from your personal profile instead.
By default, Chrome debugger will create a new profile for your debugging session and will persist until you restart your computer. The profile directory will be in your %TEMP% folder. The trick here is to create a profile just for your workspace. You could then configure this profile to have whatever extensions and other settings that you need. We just need to make it persist permanently by specifying a different location.
Instead, set the userDataDir property to a path in your .vscode directory (and ignore in your source control). It will create the profile in that directory you set. I use:
${workspaceFolder}/.vscode/vscode-chrome-debug-userdatadir
Then when you run the debugger, it will create a profile in that directory that should persist indefinitely. You could then install all the extensions you want, all without muddying up your personal profile.
If you want a central debugging workspace to be used for multiple projects, you could put it in your home folder (or other location) rather than your project workspace.
${env:HOME}/.vscode/vscode-chrome-debug-userdatadir
One way is to prevent the debugger from starting a chrome instance with a seperate profile.
Just add "userDataDir": false within "configurations" to your launch.json.
Close all Chrome instances, than start debugging from Visual Studio Code.
Your previous chrome session should open including a new Tab serving your files.
Afterwards you can start/stop debugging without closing and reopening chrome.
Source: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
I'm trying to get debugging in Visual Studio Code with an application running via Webpack. There is lots of contradictory information around, and the documentation relating to usage with Webpack is very poor.
I understand that I need a launch.json file in the .vscode dir in the root of my project, and it appears that there are two approaches:
Launch Webpack (using yarn start which maps to webpack-dev-server --env development --open, then have VSCode attach to that.
Have VSCode launch webpack in Chrome and then attach to that.
After a couple of hours trying different things I have had no success.
If I run webpack and try and attach to it using the following launch.json:
{
"version": "0.0.0",
"configurations": [
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}"
}
]
}
I get an error in VSCode saying:
Got a response from the target app, but no target pages found
What is the best way to approach this?
Should I be trying option 2 and running Webpack from VSCode?
Note that running yarn start runs the application successfully in Chrome.
When using the "request": "attach" config you need to specify 'urlFilter' instead of 'url'. Note that 'urlFilter' uses wildcard, so your config should look like this;
{
"name": "Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"urlFilter": "http://localhost:8080/*",
"webRoot": "${workspaceRoot}"
}
Ref; https://github.com/Microsoft/vscode-chrome-debug#other-optional-launch-config-fields
I am building a chrome extension, but I want to use react to build it. I am not sure how I need to configure my manifest.json in order to get it to work.
This is my manifest.json file...
{
"name": "Get pages source",
"version": "1.0",
"manifest_version": 2,
"description": "Get pages source from a popup",
"browser_action": {
"default_popup": "./src/index.html"
},
"permissions": ["tabs", "<all_urls>"]
}
Now the way that I run my app locally, is with the following script in package.json...
"scripts": {
"dev": "webpack-dev-server --content-base src --inline --hot"
}
My app displays on localhost:8080. However, I want the app to open up when I click on my extension. How can I do this? Do I need to reference the path to the localhost?
At the moment, when I run my extension, the index.html file gets loaded but nothing is rendered. Can someone explain how to do this?
EDIT
I also tried the following but it did not work...
"browser_action": {
"default_popup": "http://localhost:8080/src/index.html"
},
Change default_popup in manifest.json to "src/index.html".
Always build your code before packing extension and use webpack instead of webpack-dev-server
Also babel-core and webpack-dev-server were missing from package.json
Here is the screenshot of working extension:
Screenshot of development:
Make a new folder when you publish your extension which excludes node_modules folders ( only after you npm run build )
Here is the link with the updated code: https://drive.google.com/open?id=0ByrxEyIevnFmNXlDZERaRTBMSlE
Please don't forget to run npm install and npm run build before loading unpacked extension.
Comment if any further help needed.
I have a chrome extension (.crx) that when I install it directly everything works fine, but doesn't when I try to load it in developer mode with the manifest.json I created.
I no longer have access to the developer who wrote this extension for me, so I tried to package it for the Chrome store myself.
To explain in more detail. The usecase where my chrome extension works:
I open the extensions area in Chrome
I drag and drop the .crx file into my chrome extensions dashboard
My icon appears as expected in the toolbar
I click on the icon and the dialog box for my extension appears as expected
The usecase where my packaged chrome extension doesn't work (after uninstalling the .crx file):
I created a package, with the manifest.json described below incorporating the exact same .crx file used successfully above.
To test the package, I went to the extensions dashboard, made sure my "Developer Mode" checkbox was enabled, and selected the "Load Unpacked Extension".
No errors, and the icon loads just fine.
I click on the icon in the browser toolbar, nothing happens! No dialog appears even though it is the exact same .crx file.
Here's the manifest.json I created:
{
"manifest_version": 2,
"name": "Rock the Deadline Curation Extension",
"version": "5.2",
"description": "This extension allows you to bookmark and curate content into RTD Studios and share with other studio users.",
"icons": {"128": "RTD-Square-Icon_128x128.png"},
"browser_action": {
"default_icon": {
"19": "discover-iconx19.png",
"38": "discover-iconx38.png"
},
"default_title": "RTD Studios"
}
}
Any thoughts? Thanks so much in advance!
Reverse engineering an extension could be a complicated process, and I wouldn't recommend it if you don't need to. But a .crx file is a .zip file with some extra stuff at the beginning. This means that you may be able to unzip the file as if it were a .zip file, and ignore any error that comes up. I've not been able to do this with Windows right click "Extract All", but I have done this with the Mac OS X unzip command. Once you have the extracted folder, you can load the extension using your second step 2 above.