I am trying to debug coffeescript code using Webstorm and Chrome. Compilation and source map generation is done by coffee-script-redux.
main.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="main.js"></script>
</head>
<body>Hello World!</body>
</html>
main.coffee
f = 1
main.js
// Generated by CoffeeScript 2.0.0-beta7
void function () {
var f;
f = 1;
}.call(this);
//# sourceMappingURL=main.js.map
main.js.map
{
"version":3,
"file":"unknown",
"sources":["stdin"],
"names":["f"],
"mappings":"AAAA;;;EAAAA,CAAA,GAAI"
}
When I open main.html and click "Debug main.html" it will open the page in Chrome (JetBrains IDE Support chrome extension is connected with Webstorm). But the breakpoint in the coffescript file is not hit and it does not have an arrow on the red circle.
Note: I can debug the generated javascript file without problems.
Using Webstorm 7.0.2, Chrome 31.0.1650.48 m, JetBrains IDE Support 1.27
Please use the standard coffeescript compiler instead of redux - it does much better job if the sourcemaps are concerned. Here is what the map prodiced with it looks like:
{
"version": 3,
"file": "main.js",
"sourceRoot": "",
"sources": [
"main.coffee"
],
"names": [],
"mappings": ";AAAA,CAAA,GAAA;;AAAA,CAAA,EAAI"
}
both 'files' and 'sources' are known, plus the generated URL comment better conforms to spec
Note also that breakpoints in your code won't work in WebStorm 7 due to the known issue: sourcemap backed breakpoints do not work until page is loaded. The issue is fixed in WebStorm 8 daily builds. Please vote for http://youtrack.jetbrains.com/issue/WEB-6413 to be notified on any update
Related
Using the example in their docs, I created the following:
entry.js:
require('./style.scss');
console.log('The background is pink!')
style.scss:
body {
background: pink;
}
I then run this through browserify: browserify -t sassify entry.js > bundle.js and get this:
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
require('./style.scss');
console.log('The background is pink!')
},{"./style.scss":2}],2:[function(require,module,exports){
module.exports = "body {\n background: pink; }\n";
},{}]},{},[1]);
I can see my css in there! But when I create a minimal html that loads the bundle, I see 'The background is pink!' in the console - but it stubbornly remains white. Am I forgetting anything? What does it take for the styles to actually show up?
index.html:
<html>
<body>
<h1>Pink!</h1>
</body>
<script src='bundle.js'></script>
</html>
In the sassify github page it says Currently breaks in some cases on node 0.11.x with latest version (2.0.1) of node-sass as documented in node-sass issue #550. This is also the reason why node 0.11 is currently not supported. Use at your own risk (though no actual risk is involved, it might just not work).
I too couldn't get it to work. As he says, it doesn't break anything. It just doesn't do anything at all.
You might want to try cody-greene's scssify. All you need is: npm i scssify -D
And in place of browserify -t sassify entry.js > bundle.js you need browserify -t scssify entry.js > bundle.js
You just need to make sure you use sassify#4.0.0
I have created a Gulp plugin called php-include-html, which scans php files in Gulp and processes include and require statements to inline HTML snippets.
The snippet of the gulpfile looks like this...
var gulp = require("gulp");
var pump = require("pump");
var phpinc = require("php-include-html");
gulp.task("php",function(cb) {
pump([
gulp.src("*.php"),
phpinc({verbose:true}),
gulp.dest("build")
],cb);
});
This is a snippet from the php file before processing...
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Emma Malik's Official Website - Legal</title>
And here's the same snippet after processing...
<!DOCTYPE html>
<html lang="en-gb">
<head>
<title>Emma Malik&s Official Website - Legal</title>
As you can see, the apostrophe has been HTML encoded. However, it doesn't seem to be all ampersands, just some of them, and some other characters as well, such as > to > but again, not all of them.
All the way through my plugin, this remains an apostrophe, it seems to be the gulp.dest rewriting the file which somehow converts it.
Things I've tried...
Stripping the UTF-8 BOM from the source file (strip-bom and
strip-bom-buf)
Adding the UTF-8 BOM to the destination file (gulp-header)
Using string manipulation instead of String.replace
Converting the destination contents to UTF-8 (gulp-convert-encoding)
Decoding after my plugin before gulp.dest (gulp-html-entities)
Using vinyl-file
Has anyone seen anything like this before, or know how to fix it?
False alarm, it turns out that it is actually the "gulp-sri-hash" plugin, which runs after mine, which is doing this. I need to investigate further as to what exactly is causing this, but at least I've figured out it's not me!
How can I parse the version number of Firefox programatically.
So, I don't have to visit the page every time.
All I would have to do is run the script, and it will give me the latest version.
http://download.cdn.mozilla.net/pub/mozilla.org/firefox/releases/latest/update/win32/en-US/
The file will always have ".complete.mar" in it. It's the only file with the word "complete" under this directory.
How can I parse the version "40.0.2" from it.
Download the latest release
The simple answer is Mozilla Release Engineering already provides a way to download the latest version. See https://ftp.mozilla.org/pub/firefox/releases/latest/README.txt
For example, I want to download the latest Linux 64-bit US English version of Firefox. So I would:
curl -Lo firefox.tar.bz2 'https://download.mozilla.org/?product=firefox-latest&os=linux64&lang=en-US'
tar -xjf firefox.tar.bz2
cd firefox
./firefox --version
Mind you those are stable releases and not RC or nightly. For those see release notes in the appropriate subfolder.
Notes:
The curl command URL is surrounded by single quotes (') to avoid bash interpreting the ampersands (&).
You would likely want to add your downloaded Firefox at the beginning of the $PATH (or %PATH% in Windows) environment variable.
Get latest release version number
To get the latest version number without downloading the archive you would use the HTTP HEAD method (curl -I option). Example,
curl -fI 'https://download.mozilla.org/?product=firefox-latest&os=linux64&lang=en-US' | grep -o 'firefox-[0-9.]\+[0-9]'
which will return something like firefox-67.0.4.
Because I have to know the lastest version numbers of many applications, I've created the online service called vergrabber which provides that information in json.
You may try this free service at http://vergrabber.kingu.pl/vergrabber.json
You are going to run into problems because the data you want to check is not within the same domain.
You can however using something like node webkit(now nwjs) to get pass the browser limitation.
To start download the nodewebkit files for your operating system from the following link:
http://nwjs.io/
Extract the contents.
Download JQuery and place it in the extracted folder(rename the file jquery.js).
create a new text file, add the following contents and save it as package.json
package.json contents:
{
"main": "index.html",
"name": "firefoxversion",
"version": "1",
"window": {
"title": "latest firefox version",
"icon": "link.png",
"toolbar": true,
"width": 800,
"height":600
}
}
Create a file name index.html and save the following contents:
index.html contents:
<html>
<head>
<title>Latest Firefox Version</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Next create a file named main.js and save the following contents:
main.js contents:
var url ="http://download.cdn.mozilla.net/pub/mozilla.org/firefox/releases/latest/update/win32/en-US/";
var version;
$.get(url,function(data){//begin function
$(data).contents().find("a").each(function(){//begin each function
//create an array to hold the hmtl
var html = [];
if($(this).attr("href").indexOf("complete.mar" !== -1 )){//begin if then
version = $(this).attr("href").split(".c");
//start building your html to output
html.push("Download the latest Firefox Version " + version[0] + " below:<br>");
//add the download button
html.push("<input type ='button' id ='firefox-latest' value = 'Download Firefox'>");
//display the html in the #result div
$("#result").html(html.join(""));
}//end if then
});//end each function
});//end function
//on click event for #firefox-latest
$(document).on("click","#firefox-latest",function(){//begin on click event
//change the window location to the file for the latest firefox version
window.location.href = url + version[0] + ".complete.mar";
});//end on click event
Lastly click on the nw.exe icon inside of the folder you extracted earlier
and you should see the latest version number of firefox.
I'm using yeoman's angular-fullstack generator with default parameters.
I would like to use ckeditor with https://github.com/lemonde/angular-ckeditor , so I extended my bower.json with the following lines:
"ckeditor": "#full/4.4.7",
"angular-ckeditor": "~0.4.2"
It works well in development mode ( grunt serve ), but it fails in production ( grunt serve:dist ). It tries to load /config.js and /skins/moono/editor_gecko.css and the language file dynamically, but it fails.
Have anybody idea how to solve it?
Had similar issue with ACE editor. What I did is I added override in bower.json
for ace looks like this
"overrides": {
"ace-builds": {
"main": [
"src-noconflict/ace.js",
"src-noconflict/theme-monokai.js",
"src-noconflict/worker-javascript.js",
"src-noconflict/mode-javascript.js"
]
},
for you ckeditor config you can specify it in a similar way in the overrides
i.e.
"overrides": {
"ckeditor": {
"main": [
"path/to/your/ckeditor.js",
"path/to/your/ckeditor/config.js"
]
}
}
for the CSS, not sure but if you check your gruntfile you might come up with a simple solution (i.e. add one more folder to the CSS sources).
If you find a nice CSS solution please post it as it could be helpful to more people ;)
I just can't get it work. I have a .scss file with some basic CSS.
Now, I have installed Ruby and I installed SASS like so - gem install sass.
What do I do to get it work on sublime?
I installed "SASS" so sublime acknowledge the .SCSS extension. I also installed SASS builder, and it actually works but in an strange way.
In addition to the compiled css file, it also adds .map file and a folder name .sass-cache.
Why Is that? How to I get rid of that? I don't need a .map file.
I also get an alert every single time the build is done. ("style.css has been compiled")
And not only that but I also get this comment at the end of my compiled CSS file:
/*# sourceMappingURL=style.css.map */
Please help, I'm lost.
Thanks in advance.
The .map file is for chrome (and maybe other browsers) to MAP your CSS that is rendered in the browser back to your actual SCSS. This is very very useful when debugging.
The scss-cache is just what it says it is a cache file that Sass uses. You can delete it but it will keep coming back every time you compile.
Once you go to production you can set Sass to not add any comments to your final css output file. You do this through a config.rb file if you are using compass.
Search on YouTube for LevelUp Tuts and Sass Compass install. Scott expanse how to get stared very well.
--sourcemap=none will disable the comment as well as the .map file creation. not so hard guys.
also, --no-cache will prevent creating the .sass-cache folder and its content.
Thanks anyway.
Try using SassBuilder for ST2. And you can config not to include comments, cache,etc with True/False.
{
"output_path": "../css",
"options": {
"cache": true,
"debug": false,
"line-comments": true,
"line-numbers": true,
"style": "nested"
}
}
For further info, click here.