I need to use "live preview" PhpStorm in Firefox browser but this module cannot be found in PhpStorm.
There is PhpStorm extension for Chrome, but it does not work very well and I'm using just Firefox browser.
Live Edit functionality is only supported in Chrome.
Firefox support can't be expected in the foreseeable future:
to implement the Live Edit functionality, we need to support the Firefox Debugging Protocol from scratch. This requires significant efforts and resources that we are not ready to invest right now. We recommend using tools like Browsersync that we believe provide the great development experience.
Related
Really Quick question:
Why does the Brave browser have Chrome's dev-tools?
Does this also mean that I don't need to test my website in Brave if it works in Chrome?
Thanks :)
Take a look at their github page. Especially the tags they added:
Notice the word "Electron", now I could explain to you what Electron is but they have an excellent explanation on their Electron Home page:
Electron is an open source library developed by GitHub for building
cross-platform desktop applications with HTML, CSS, and JavaScript.
Electron accomplishes this by combining Chromium and Node.js into a
single runtime and apps can be packaged for Mac, Windows, and Linux.
As you can see, Electron uses "Chromium". I could explain but.... you've guessed it they offer a great explanation themselves:
The Chromium projects include Chromium and Chromium OS, the
open-source projects behind the Google Chrome browser and Google
Chrome OS, respectively. This site houses the documentation and code
related to the Chromium projects and is intended for developers
interested in learning about and contributing to the open-source
projects.
So thats why you can access the chrome dev tools inside Brave.
On to your other question:
I don't need to test in Brave if my website works in Chrome?
Yes and no, you can be fairly certain that Brave will do everything Chromium does. But in the end we can't be certain what Brave does to the pages loaded through it. Having said that I won't be giving you a firm answer on this :)
(PS: if you set up automatic testing it doesn't really matter if you have to test another browser)
So in the Chrome version of Firebug, it's lying on top of the window, thus, if the whole window has text, you will have stuff hidden behind the firebug. Is it possible to get it to be like Firefox's version, where it is part of the window screen like the developer console? The options don't seem to point to anything that indicates this option.
The Chrome extension of Firebug is based on Firebug Lite, which is a JavaScript that is injected into the website. So, there is unfortunately no way to integrate it into Chrome's UI.
Furthermore, Firebug Lite (and with that the Chrome extension) is unmaintained for several years now, so it doesn't provide the features integrated developer tools have.
Alternatives are:
Chrome DevTools
Chrome has integrated developer tools, which provide a huge amount of features for web developers.
Firefox DevTools
The Firefox developer tools allow to debug Chrome (and other browsers) remotely. This doesn't work as good as the integrated tools and provides less features, but allows you to use the same tools to debug in different browsers.
debugger.html
The debugger.html project (developed by the Firefox DevTools team) picks up the idea of Firebug Lite by providing a browser independent UI. It's based on a local web server serving a website, which allows you to debug JavaScript code in different browsers by connecting to them remotely. Unfortunately, it currently only provides a JavaScript debugger and it's unclear whether it will be extended to cover other features like an HTML inspector panel, a network panel, etc. later.
How we can enable live sass in devtools?
Base on Umaar post in own blog
https://umaar.com/dev-tips/103-live-sass/
To clarify "Enable CSS Source Maps" only allow your browser to show mappings between scss and css. Live SASS is is still experimental feauture. You'll be able to enable it by pressing SHIFT button six times on the experimental tab in the dev tools settings.
I tried it in latest unstable chrome build on Linux and it doesn't seem to work, so you'll need latest Canary build.
UPDATE:
It works in 53.0.2763.0 dev build on Linux.
Update:
Looking at this again, there appears to be a new experimental feature that is apparently in Chrome Canary, which takes out the need to run sass watch I think. However, I am unable to actually find where this gets enabled. I left my original answer as it may be of use still.
This is no longer an experimental feature. In Settings, make sure 'Enable CSS source maps' is enabled and (optionally) 'Auto-reload generated CSS'.
You can add your source files as a Workspace and live edit:
On a side note, to enable experimental features in Chrome, navigate to chrome://flags/, enable Developer Tools experiments and restart Chrome.
In Settings, you will see a new Experiments section:
I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.
It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.
Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.
It... miraculously disappeared one day, and google does not give any insight.
I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?
Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension
We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.
According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.
Chrome and Firefox have both removed their Canvas inspectors...
Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated:
https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
You can enable it in the settings of the normal inspector
EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67:
Mozilla deprecated listing
Bug report with reasoning
Alternative:
spector.js - Recommended alternative by Mozilla
Canvas inspection was just removed!
You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg. (Provided by freesmug)
Happy Canvas Inspection!
This is the best extension inspector I’ve seen so far.
https://spector.babylonjs.com
First go into
chrome://flags
Then enable
Developer Tools experiments
Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.
Is an opensource/commercial tool/framework, available for automated web app testing in Google Chrome browser on Windows XP / Vista? ( An alpha/beta Tool is also OK)
Thanks
Selenium supports Chrome pretty much out of the box because it works by injecting javascript in the web page. http://selenium-rc.openqa.org/
Webdriver has an early version of Chrome driver. http://code.google.com/p/webdriver/
Both are open source and works on Windows.
I found a tool called QA Agent (http://qaagent.com). This is a web based IDE where you can develop your tests using jQuery and javascript. Currently it supports only Chrome so may be it will be a good choice for you. And of course it is free.
For those who are not developers you could try FRET for automated web testing with Chrome. It's still in beta and even though it states that no programming is needed a basic understanding of HTML / CSS etc. is recommended.