I have this Webpack Config
Notice:
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
}),
and:
devtool: !PROD ? 'eval-source-map' : 'source-map',
I'm running a dev environment so in this case
devtool: 'eval-source-map'
I use firefox 54 with the following setting:
devtools.source-map.locations.enabled:true
When working with Chrome console I can easily debug from the console since the mapping works perfectly
And it takes me to the right line:
But when using firefox it gets the mapping wrong:
And always takes me to a wrong file and line (in this case a lodash.js line)
Is this a Firefox bug? Or there's something wrong with my webpack config?
Related
Have a very strange issue with Monaco Editor. When developing, and running NPM RUN WATCH, editor displays perfectly in browser. After running NPM RUN PROD, the view breaks. See below. I have tried everything to resolve this, webpack changes, CSS changes, Moved out of Patternfly Code Block elements.
The only error I get after NPM RUN PROD in the console is
'Element already has context attribute: pf-c-code-editor__code-pre'
Ignoring the actual attribute, I get the same error when attribute is present. I think this is a red herring though.
Running VUE3, Laravel, latest Monaco. Sample editor code below
See any tips or advice and what to do next?
const codeEditorDiv = document.getElementById('pf-c-code-editor__code-pre');
meditor = monaco.editor.create(codeEditorDiv, {
value: meditorValue.value,
language: language.value || 'javascript',
lineNumbers: lineNumbers.value,
roundedSelection: false,
readOnly: false,
theme: darkmode.value,
scrollBeyondLastLine: true,
wordWrap: 'on',
wrappingStrategy: 'advanced',
automaticLayout: true,
minimap: {
enabled: false
}
});
Updated Screenshots, before (NPM RUN DEV) and after (NPM RUN PROD)
I have a problem to make Firefox Developer Tools (Firefox Developer Edition 59.0b7) work with CSS source maps generated by Webpack in development mode (using webpack-dev-server).
In Firefox Developer Tools, when I inspect an alement, it's CSS rules locations are some chunk's hashes, e.g. blob:http://localhost:9090/1e451f65-5d5a-4155-a7a9-96df9945244b instead of real file names (screen below). Also those locations links are invalid - clicking them doesn't take me to the source file.
I'm also sometimes getting this kind of errors in Firefox Developer Tools console, which I are probably connected:
Source map error: Error: sourceMapURL could not be parsed Resource URL: blob:null/b9a1fdd6-c0a3-4426-9df0-d50f1e8dc670 Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3JvYmVydC9wcm9ncmFtbWluZy93ZWJwYWNrLXBsYXlncm91bmQvc3JjL2NvbXBvbmVudC1hL2NvbXBvbmVudC1hLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtJQUNJLGNBQWM7SUFDZCx1QkFBdUI7SUFDdkIsa0JBQWtCO0NBQ3JCOzs7QUFHRDtJQUNJLG1CQUFtQjtJQUNuQixpQkFBaUI7SUFDakIsaUJBQWlCO0NBQ3BCOzs7QUFHRDtJQUNJLG1CQUFtQjtDQUN0QiIsImZpbGUiOiJjb21wb25lbnQtYS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuQ29tcG9uZW50QSB7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIGZsZXgtd3JhcDogbm93cmFwO1xufVxuXG5cbi5Db21wb25lbnRBLUhlYWRlciB7XG4gICAgbWFyZ2luLWJvdHRvbTogM3B4O1xuICAgIGJhY2tncm91bmQ6ICNlZWU7XG4gICAgZm9udC1zaXplOiAxLjVlbTtcbn1cblxuXG4uQ29tcG9uZW50QS1Cb2R5IHtcbiAgICBwYWRkaW5nLWxlZnQ6IDEwcHg7XG59XG4iXSwic291cmNlUm9vdCI6IiJ9[Learn More]
Everything displays perfectly fine in Chrome Developer Tools (Chrome 59.0.3071.104) - I see original file names in the inspector (screen below) and original SCSS contents after clicking the the file name link.
Is there a way to make Firefox work properly with Webpack's CSS source maps like Chrome does?
My configuration
I have Enable Source Maps turned on in Developer Tools' options. devtools.debugger.source-maps-enabled is set to true in about:config.
Here are relevant excerpts from my Webpack config:
// I tried different devtools but the results in Firefox were the same.
devtool: 'eval-source-map'
(...)
// Chain of loaders for CSS files.
{
test: /\.(scss|sass|css)$/,
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: [
autoprefixer
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
outputStyle: 'expanded',
/* Custom functions to use in Sass files. */
functions: {
'base64encode($text)': function(text) {
let textInBase64 = new Buffer.from(text.getValue()).toString('base64');
return new sass.types.String(textInBase64);
}
}
}
}
]
}
I'd guess this is a bug in the Firefox DevTools. And as far as I know, there is currently a lot of work going into fixing such source mapping issues.
Therefore, you should first try out the latest Nightly build and see if it's still a problem there. And if yes, file a bug for it and maybe mark it as blocker of bug 1339970.
I've just installed Firefox Dev Edition, and I don't know how to tell browsersync to start with it when I launch it.
I know there is the browser option in which I can specify "firefox", but how can I differenciate one FF installation from one other ?
The issue would be the same if I had various regular FF installed (eg a 3.5, a 48.x and a 50.x).
I can always open manually the right FF and load the page after browsersync started, but I would like it to do it manually (and not to be opened in my regular non-dev FF).
In fact, it was quite easy: if you put the absolute path to an executable file in the browser option, it takes it smoothly.
So options should be something like :
{ port: 9000,
server: {
baseDir: [...
],
routes: {
'/bower_components': 'bower_components',
'/node_modules': 'node_modules',
'/temp': 'temp'
}
},
logLevel: 'info',
notify: true,
browser: 'C:\\Program Files (x86)\\Firefox Developer Edition\\firefox.exe',
reloadDelay: 0 //1000
}
I'm toying around with an Angular 2 / Bootstrap 4 / Webpack project, just to see how the new stuff is lining up, and I'm trying to get debugging to work in IntelliJ IDEA 15 in Chrome with the JetBrains Chrome extension.
The problem is that any breakpoints I set in my TypeScript files are ignored. I'm using the built-in transpiler and leaving the JavaScript output files with the same name/location as the TypeScript files, so that my-app.ts is in the same folder as my-app.js and the associated my-app.js.map mapping file.
The odd thing is that if I set breakpoints in the generated JavaScript file, the IDE then breaks in the corresponding spot in the TypeScript file (even though it shows no breakpoint there). I can then step normally since the mapping seems to work.
The problem seems to be that setting a breakpoint in a .ts file doesn't set the needed breakpoint in the corresponding .js file.
Am I doing something wrong (I've never worked with TypeScript debugging before), or is this a bug in IDEA?
P.S. I get the same results whether doing remote JavaScript debugging or using local debugging through IDEA's built-in web server.
The trick was adding a reference to the Webpack internal URL to the debug config. The path to use for that Webpack URL will come from the scripts tab of the debugger when the application is running. You can also see it in Chrome's scripts tag just as easily, but I've included the view from IntelliJ IDEA here:
You can see that the . path in webpack:// corresponds to my project folder (as witnessed by the src path in it). That's what told me that I needed to use the . path for Webpack in the debug config. If your project lines up differently, you'll have to adjust accordingly.
As to why it is webpack:///. (with three slashes) instead of webpack://., that I can't answer. I saw that used in a JetBrains post and that's what led me to that solution of adding an additional forward slash.
Now you need to create your JavaScript debug configuration and set it up like the following:
Adjust your localhost URL and port, as well as your build path (__build__ in my case, maybe build or dist in yours).
Now that I have the debug configuration setup like the above, it works just fine.
I have successfully solved problem with debugging with webpack in Intellij/Webstorm based on this solution: How to debug angular 2 app using angular-cli webpack?. You have to map your main ui project directory and directory with .ts sources to remote url, exactly the same as in the solution upside.
My tsconfig.json:
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"noImplicitAny": false,
"outDir": "../resources/static/out-tsc",
"sourceMap": true,
"target": "es6",
"typeRoots": [
"../../../node_modules/#types"
]
}
}
I downloaded this vagrant selenium grid setup from GitHub, and tried it out as is. I can get my protractor tests working with the default firefox instances, but I am getting errors when trying to test on the chrome instances. Here is the log output from the node vm's node.log file when I try to run a test with chrome.
I have tried using openjdk 6 & 7, and have tried the latest chromedriver (64Bit) as well as chromedriver 2.9 & 2.8, and tried the latest versions of the selenium-sever-standalone jar file.
I am using protractor 0.23.1 at the moment. Here is my protractor config file:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
chromeOnly: false,
splitTestsBetweenCapabilities: true,
specs: ['./e2e/**/*pec.js'],
multiCapabilities: [{
'browserName': 'firefox',
'platform': 'LINUX',
'maxInstances': 2,
}, {
'browserName': 'chrome',
'platform': 'ANY',
'maxInstances': 2
}],
jasmineNodeOpts: {
showColors: true,
isVerbose: true,
includeStackTrace: true,
defaultTimeoutInterval: 30000
}
};
I have also tried adding the flags below to the script in the conf/upstart/selenium-node.conf file, but chrome still wont startup (same message as in log above).
-browser "browserName=chrome" -Dwebdriver.chrome.driver="/usr/bin/chromedriver"
Does anybody have this setup running with chrome? Or can you see what the problem is here? Any advice could be helpful.
Try opening an issue in that selen repository since the provided vagrant doesn't seem to work out of the box.
Overall seems your goal here is to run selenium+chrome headless.
Take a look at my answer here.