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
}
Related
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 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?
I am using protractor 1.3.1 and running iedriverserver.exe 2.43.0.0 with IE11 installed (windows).
This is my spec:
describe('quick test IE driver', function () {
it('should go to ng homepage', function () {
browser.driver.get('https://angularjs.org/');
var title =element(by.css('h1')).getText();
expect(title).toBe('HTML enhanced for web apps!');
});
});
And this is my protractor.conf.js:
exports.config = {
// The address of a running selenium server.
//seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
'platform': 'ANY',
'version': '11'
},
// Spec patterns are relative to the current working directly when
// protractor is called.
specs: ['main.spec.js'],
// Options to be passed to Jasmine-node.
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
isVerbose:true,
includeStackTrace:true
}
};
getting this error though, any ideas for a solution:
UnknownError: The path to the driver executable must be set by the webdriver.ie.driver system property;
Update web manager for IE
First step is to update the ie webdriver using webdriver manager.Open command prompt and run the command given below
webdriver-manager update --ie
Go to npm location In this step move to the NPM_LOCATION(folder where npm is installed at your system. Move to the following path "NPM_LOCATION\node_modules\protractor\selenium" At this location check that IEDriverServer.exe is present or not.
Change for IE in conf.js
// conf.js exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['specs.js'], capabilities: {
'browserName': 'internet explorer' // conf for internet explorer } }
// spec.js describe('Protractor Demo App', function() { it('should have a title', function() {
browser.get('http://juliemr.github.io/protractor-demo/');
expect(browser.getTitle()).toEqual('Super Calculator'); }); });
Now run protractor conf.js
Note: Make sure you restart server by -->webdriver-manager start
taken from: http://protractorsupport.blogspot.com/2015/05/use-protractor-with-internet-explorer.html
According to the protractor config doc, the config value "seleniumArgs" is deprecated.
So, to have a single answer with all the info, here are the simplified steps:
Install Protactor globally:
npm install -g protractor
Run webdriver-manager update --ie to update the Selenium drivers that Protactor uses. Be aware if you are running the global webdriver-manager or the local webdriver-manager (i.e ./node_modules./bin/webdriver-manager update help); they will unzip the drivers at separate locations; only the local will unzip in [Project dir]
Take a look at the log of the previous command. It must show that the drivers were unzipped at a particular folder. Go to that folder and locate the IEDriverServer. In my case it was: "[Project dir]\node_modules\protractor\node_modules\webdriver-manager\selenium\IEDriverServer_x64_X.XX.X.exe. You will need to give the relative path to this file in the next step.
Inside your conf.js file, add the following keys & values. Note the use of localSeleniumStandaloneOpts, which means you should remove the property seleniumAddress if you have it:
multiCapabilities : [
{
'browserName' : 'chrome'
}, {
'browserName' : 'internet explorer'
}
],
localSeleniumStandaloneOpts : {
jvmArgs : ["-Dwebdriver.ie.driver=<RELATIVE PATH TO IE DRIVER>"] // e.g: "node_modules/protractor/node_modules/webdriver-manager/selenium/IEDriverServer_x64_X.XX.X.exe"
},
That was all I needed to do. I don't start the server beforehand, I simply run protactor conf.js. Easier now, I guess.
Download the IEDriverServer.exe
Please specify the same in your config file
seleniumArgs: ['-Dwebdriver.ie.driver=<path to IEDriverServer.exe>']
I was looking around this question for few hours, the best way seems to be:
1) download
webdriver-manager --ie update
This should download the driver from the google.. selenium ... release folder and place it directly in the good place in your npm local repository.
2) setup in config.js file of your tests:
...
multiCapabilities: [
//{
// browserName: 'chrome',
// version: 'ANY'
//},
//{
// browserName: 'firefox',
// version: 'ANY'
//},
{
browserName: 'internet explorer',
version: 'ANY'
},
],
// For some IE functions you may need to specify defaultTimeoutInterval
...
3) setup IE:
follow this post
http://jimevansmusic.blogspot.fr/2012/08/youre-doing-it-wrong-protected-mode-and.html
PS: about the "protected mode" setup of IE, it's important to have the same setup for all zones. I prefer to have protected mode 'on' for all zone
4) patch the registry
as described here: http://heliumhq.com/docs/internet_explorer
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BFCACHE]
"iexplore.exe"=dword:00000000
5) IE 11 update break the way the system work:
My lastest issue was "the server did not provide any stack trace ...." this is due to an update of the 17th of Dec 2014. Uninstall it and then it's good.
https://code.google.com/p/selenium/issues/detail?id=3390
crazy path to make it running. It cannot be like this for a long run, please comment my post with your experiences/feedbacks.
Richard
Here is my config file:
exports.config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
capabilities: {
'browserName': 'internet explorer',
},
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['your_spec_file.js'],
};
The steps to run in IE :
Need two terminals in Visual Studio Code,
In the first terminal, Run command "webdriver-manager start" to start selenium server.
In the second terminal, Run your js config file as :
Protractor conffile_name.js
This will successfully start Internet explorer.
Thanks
I am using grunt and I'm trying to get the watch/livereload task to run on my local server (MAMP) but with no success.
I'm calling the task based on HTML5 Boilerplate grunt files (https://github.com/h5bp/html5boilerplate.com/blob/master/Gruntfile.js, https://github.com/h5bp/html5boilerplate.com/blob/master/package.json).
I have also tried implementing Tiny-lr (https://github.com/mklabs/tiny-lr) without success either.
My connect and watch options right now are this
connect: {
options: {
hostname: 'localhost',
livereload: 35729,
port: 8888
},
livereload: {
options: {
base: '../',
open: true
}
},
},
watch: {
files: '<%= settings.dir.src %>/**',
less: {
files: ['src/less/*.less'],
tasks: ['less'],
},
options: {
livereload: '<%= connect.options.livereload %>'
},
scripts: {
files: ['<%= settings.dir.src %>/js/*.js', 'css/**/*.scss' ],
tasks: 'default',
options: {
spawn: false,
}
}
}
And here I declare the dev task:
// development task
grunt.registerTask('dev', [
'connect:livereload',
'watch'
]);
When I run 'grunt dev' my browser opens at http://127.0.0.1:8888/ and displays only this: Cannot GET /
I need my browser to open http://localhost:8888/ctrl/ (ctrl being the name of the folder project on MAMP, could be anything), I thought that changing the "base" option was the way to go but nope, it is not, and I cannot add "/ctrl" to host name either, nor to the port.
Any ideas?
Thank you
Here is a link to my whole code: https://github.com/zolitariuz/ctrl
i think you are misunderstanding 2 tasks in grunt,
the connect task is used to create a http server spawned by node js, so no php nor mysql support, you DON'T want to run you WP site thru that.
the watch task is looking for changes in files on YOUR computer, launching the according task after a file change, then trigger the live reload.
you should remove connect completely after you copied the live reload object in your watch task.
the you should run your local lamp stack for running wp then start the watch task for file changes.
on the wp side you should enqueue the live reload script, or use a browser extension that will inject it for you.
Here is my Gruntfile.js
watch: {
options: { livereload: true },
compass: {
files: ['assets/sass/*.{scss,sass}'],
tasks: ['compass']
},
// js: {
// files: '<%= jshint.all %>',
// tasks: ['jshint', 'uglify']
// },
livereload: {
// files: ['*.html', '*.php', 'assets/stylesheets/**/*.{css}']
files: ['*.html', '*.php', 'assets/stylesheets/custom.css']
}
},
// compass and scss
compass: {
dist: {
options: {
config: 'config.rb',
force: true
}
}
},
and this is output from grunt watch :
Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 11.033s at Fri Dec 06 2013 14:20:48 GMT+0100 (CET) - Waiting...
OK
>> File "assets/stylesheets/custom.css" changed.
>> File "assets/sass/custom.scss" changed.
Running "compass:dist" (compass) task
overwrite assets/stylesheets/custom.css (0.701s)
identical assets/stylesheets/app.css (3.452s)
Compilation took 4.158s
Done, without errors.
... Reload assets/sass/custom.scss ...
... Reload assets/stylesheets/custom.css ...
Completed in 10.719s at Fri Dec 06 2013 14:21:53 GMT+0100 (CET) - Waiting...
..so, why is livereload taking so much time for refreshing the page,
10secs to preview any change in my .scss file, also how it would be
possible not to refresh page completely but only inject .css changes
in page?
..another thing i would like to know is how to avoid that
compilation lag on app.css, which took almost 4 secs, and it is not
even changed?
I am using livereload browser extension with this configuration.
Thanks.
1a: to speed things up in a watch task try the option spawn:false. This might make things unstable, but it's worth a try. If it seems ok go for it. It might cause you problems later though if you add a lot of different tasks to the watch task. But you can worry about that then and disable it potentially.
1b:
First of all don't enable livereload on for the compass task. (you have it globally, take in only in the css) Because of this it will trigger a livereload event for the scss file as well. But since the livereload client doesn't know this file then it will reload the whole page. Make sure the only reported file is the compiled css.
Secondly the watch task will trigger livereload for previously changed files as well. This is a known but, I believe it is fixed in master, but no published yet.
https://github.com/gruntjs/grunt-contrib-watch/issues/205
2:
Well it have to compile it to compare it, then it just reports that it is identical.
To only inject .css changes:
watch: {
compass: {
files: ['assets/sass/*.{scss,sass}'],
tasks: ['compass']
},
livereload: {
files: ['assets/stylesheets/*.css'],
options: { livereload: true }
}
}
Unfortunately, I am also getting slow and similar compilation times (it must be compass).