i'm setting up an environment to debug coffeescript file.
I'm using an IDE, webstorm, that genrates both .js file and .map from original .coffee file, from coffeescript default compiler.
So I endup with 4 files all in same folder:
main.html, aa.coffee, aa.js, aa.map.
in main.html I include the js file.
The JS files contains:
// Generated by CoffeeScript 1.6.3
var my;
my = 1;
alert(my);
/*
//# sourceMappingURL=aa.map
*/
Very simple. When loading main.html it correctly popup the alert.
Now when I open google dev tools / source, where I see the tree of my files, I see the html file and the js file. But it's IMPOSSIBLE to have the .coffee file appear, although correctly referenced as you can see above. Of course, I did enable sourcemap in dev tools settings. I wathed several video tutorial and I did all step for the coffee file to appear.
Here is content of the 2 other files:
the .coffee :
my = 1
alert my
the .map:
{
"version": 3,
"file": "aa.js",
"sourceRoot": "",
"sources": [
"aa.coffee"
],
"names": [],
"mappings": ";AAAA,EAAA,EAAA;;AAAA,CAAA,CAAA,CAAK;;AACL,CADA,CACA,GAAA"
}
Do you have an idea why the source map process doesn't work on chrome dev tools ?
edit: I've now changed my mind on all this and don't use source-map debugging at all. First, it was generally flaky. Second, if I'm not writing JS I should at least be able to read it so I always debug in js.
First, keep in mind that source map debugging is flaky in Chrome right now. A couple things you can try:
Put a debugger statement in your code. I've noticed that the debug is very flaky -- about 10% of the time it just won't stop on breakpoints.
Open the coffee file directly by pressing Ctrl O in the sources pane then place breakpoints or use debugger statements.
Figure out why "sourceRoot": "", is empty. It's possible that that just means that the source file will be in the same directory as the js file (seems likely). My coffee files are in a different directory so they have a sourceRoot entry.
Generate the source maps with grunt or coffeescript. This seems unlikely to have an effect though.
I'm betting #2 will do it.
Related
In VsCode I am using Cypress with Cucumber preprocessor.
I have installed Cucumber (Gherkin) Full Support v2.15.2 plugin. The problem is, the lines from feature files are not recognized - not referencing to the code itself.
My feature files are placed under:
app/cypress/e2e/features/**/*.feature
and step definitions are in:
app/cypress/support/step_definitions/**/*.js"
I also tried to edit the settings.js (placed under C:/Users AppData) for cucumber:
{
"cucumberautocomplete.steps": [
"support/step_definitions/**/*.js"
],
"cucumberautocomplete.syncfeatures": "e2e/features/**/*.feature"
}
also tried with full path, e.g. app/cypress/support... but still not working. All lines in feature files are underlined with warning - Unable to find step for "And do something..."
ok, for anyone who is struggling with this issue, this worked for me:
in C:\Users\Username\AppData\Roaming\Code\User\settings.json just put:
{
"cucumberautocomplete.steps": [ "cypress/support/step_definitions/**/*.js"],
"cucumberautocomplete.syncfeatures": "cypress/e2e/features/**/*.feature"
}
change it to your path, but the issue was, I need to use full path including cypress. After that restart VSCode and the referencing works.
I'm trying to learn Vue.js as well so I create a simple folder called VueTest.
I have two files in the folder:
app.js
index.html
I found the info on how to configure the task runner to open up the current file and I have that setup to open in Chrome, which it does. However, because it's not running as a project, my index.html doesn't see the app.js file and so my Vue project is not working correctly. I just runs the HTML code an all I see is my mustache code (ex: {{Title}}).
How do I run files as a project?
If get it correct - you want to launch js app without opening teminals outside 'VS Code' then you have to see this
Have fun
I found my mistake, it's actually easy and I should have figured this out before posting.
To run Index.html on it's own, all I had to do was make a script reference in the page pointing to the app.js file. I didn't have to do that in JsFiddle.
you can't run files as a project in VS Code. it is just a text editor.
I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.
The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.
I can see these files on www/build
main.js
main.map.js
main.css
main.map.css
Which means the source map is generated correctly.
I have also enabled css source maps in chrome from
- DevTools -> Settings ->Sources -> Enable CSS source maps
I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,
You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.
config/sass.config.js:
module.exports = {
sourceMap: true,
}
package.json:
"config": {
"ionic_sass": "./config/sass.config.js",
}
I can verify that this works.
I'm using VisualStudio Code, and trying to enable IntelliSense. It seems to be dependent on typings. How can I install these offline? In PowerShell, running
typings search leaflet
returned an error (unsurprising, because I'm offline).
Unable to connect to "https://api.typings.org/search?query=leaflet"
Running that web query on an online computer resulted in a difficult to read JSON file. A further google search resulted in this likely candidate:
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/leaflet/index.d.ts
My question has three parts, and I'd appreciate pointers on any of these.
1) How can I figure out what typings I need?
2) Which files do I need to take to the offline computer? Do I just need the d.ts file?
2) Where should this file be installed so that VS Code can read it?
1) Simply put: if your Visual Studio Code is complaining about not being able to resolve something. Lets say I'm working with jQuery, I'm using $ a lot in my project and it's going to give me an error because it's not Typescript/JavaScript.
To resolve this, I create a JSON file to the root of my project called typings.json. It will look like this:
{
"resolution": "typings/",
"globalDependencies": {
"jquery": "github:DefinitelyTyped/DefinitelyTyped/jquery/index.d.ts"
}
}
Then in the Terminal tab (CTRL + SHIFT + <) execute the following command:
typings install
Now it will download the required typings and put the contents to root/typings/. You'll need to reference it in each file you're using (in this case) jQuery in by adding the following to the top of your TS file:
/// <reference path="./typings/globals/jquery/index.d.ts" />
You can also create a definition (.d.ts) file in the root/typings folder and add all the references there so you only have to reference that file.
2) After installing the typings in the previous step, you can copy the typings folder and put it on your offline computer. It's as easy as that. You don't need other files (not even the typings.json file, if you wish).
2) You need to reference definition (d.ts) files at the top of your .ts files.
I have a project with coffeescript and brunch.
There is following config for files concatenation:
files:
javascripts:
joinTo:
'js/app.js': /^app(\/|\\)(?!templates)/
'js/vendor.js': /^vendor/
templates:
joinTo:
'js/templates.js': /^app\/templates/
When I just clone this project and build it, all works fine - I see all my source files in developer console.
Then I do some harmless modifications in any file in project (like adding a useless variable declaration or duplicating "return" statement), and strange things happens:
A builded code is valid and works fine, but there are no source maps available.
If I disable source maps at all, I still can see some wrong behaviour:
And in the same time, origin build file is absolutely valid (can't post third link, sorry): it has '//# sourceMappingURL=app.js.map' line in the end, without any trailing spaces or whatever else.
Any ideas what can this be and how to solve this problem?
I've found where I was wrong.
First. About broken files loaded by browser.
As I noticed in comment above, the problem was in environment. My files are served by nginx, running inside Vagrant VM - and it seems, that sync between local files and VM was broken.
My solution was following:
disable caching in VirtualBox (machine settings -> tab 'Storage' -> select controller -> uncheck 'Use Host I/O cache');
edit nginx config and set 'sendfile off' option in 'http' section.
Not sure this is absolutely right solution, but after this correct files was loaded by browser.
Second. About still absent maps for app.js in Chrome.
It's just my inattention. I'm using Webstorm, and periodically it proposes to enable watcher for coffeescript files I open. And if you agree (what I've accidentally did missing 'Agree' button instead of 'Dismiss'), it will compile that file at his own, creating .map and .js files alongside origin .coffee - of course, no matter to your brunch or whatever else settings. These additional files are displayed as subfolders of .coffee file, so it is very likely that you do not notice them. And exactly these files Chrome does not like. Until you remove them all, Chrome will not display any source maps, no matter to .map file created by brunch - while for FF it's not a problem.