I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.
Related
I'm using an advanced text editor (but not a totally IDE) while developing web based applications, so I do rely on Chromium's debugger.
I want to provide an easier way to put a temporary breakpoints in the runtime via text editor's window.
All I need is to be able to send a breakpoint information in the runtime to the Chromium Debugger. Is there a way to achieve this?
You will either need to connect your text editor to the Chrome Developer Tools or write some small(ish) programs that connect to the Chrome Developer Tools and issue the appropriate setBreakpoint command.
Setting the breakpoint is basically just sending some JSON to the Chrome Developer Tools, but for that to work, you need to first ask Chrome for a Websocket connection, connect to that Websocket and then issue your command. There are various ways of automating the Chrome Developer Tools for Pyhon, NodeJS, C# and Perl (written by me), so if you can tell us what language you are comfortable in, we can likely suggest concrete libraries to do the communication with Chrome / Chromium for you.
See also
https://chromedevtools.github.io/devtools-protocol/tot/Debugger#method-setBreakpoint
I need to inspect the website but my scripts are not listed.
I already tried to uninstalled chrome and resintalled it again.
If I pause javascript and trigger any javascript action it opens a VM-version of jquery but I need the real file, not the vm-loaded one.
Any idea?
A but or not?
Any workaround?
Following the discussion from the comments above, the issue was unrelated to the web app but the environment in which the Chrome instance was run in. It was likely a Chrome Extension or modified setting that caused this misbehaviour.
The resolution was to create a new Chrome Profile, since extensions and settings are not shared between profile instances. The next step may be to identify the particular extension or plugin at fault to avoid this happening again.
Assume that I have two monitors assigned to my pc. Now I want to get the preview of a web site while coding it. Is there anyway to do this?
eg:- Do the coding from sublime text from a one monitor and the meantime watch the output from the Firefox web browser.
I have used live.js for this more than once. It can work either as a bookmarklet or embedded on your page, and it works in any browser as it's not an extension. Also requires no other software to work.
The downside is it that it will flood your developer tools with HEAD requests every second or so to determine when to reload things. That's the cost of not having to install external software.
You can use the LiveReload plugin for SublimeText. It listens for changes to your code files and updates them in the browser in real time.
Also, do not forget to add the respective browser extension. That should save you from adding any scripts into your page.
You could use yeoman ( with Grunt or Gulp depends on which generator you want to use ).
I was using IE10 on Windows 7 but it is such a buggy piece of you-know-what (hanging, crashing, etc.) that I gave up and installed IE11. It has not hung or crashed since installing. But I hate the F12 developer tools! Okay, not completely - there are some very cool new features. What I don't like is that they seem to have dropped several features that I really liked! Unless I'm just missing something... I've searched and searched on Google and Microsoft but all of the help I've found only describes the new features. Here is what I'm missing: Color picker, Ruler, and most of all, the Clear browser cache for this domain. They allege to have a Clear browser cache function, but it doesn't work! So when I make changes to my website, in particular changing graphics, the only way I can see the change is to delete all my temporary files from IE. Then I lose all of my cookies e.g. for automatically logging in to Stack Overflow! IE version 11.0.9600.16428 on Windows 7 Ultimate 64-bit.
The color picker is still available, go to the DOM Explorer tab and there is an eye dropper on the tool bar at the top towards the left. That activates the color picker.
For the issue of serving cached files try toggling on "Always refresh from server" on the network tool (3rd option from the left). This should get you the latest changes from your server.
I'm using Google Chrome Developers tool and console while developing and debugging my web applications.
I've some Chrome plugins/extensions installed. These plugins/extensions add extra markups and scripts in the pages while rendering them in the browser, and when I view my codes in the developers tool, makes it a lot messy.
I want a clean way to view my codes without those extra markups.
So is there a way to toggle (disable/enable) the plugins quickly, or in the best way, to disable them in a particular tab? I've several plugins/extensions installed and I don't think it's a good idea to disable and then re-enable them manually.
Besides, I may want to use a plugin/extension while I'm browsing other websites on other tabs simultaneously.
There's no mechanism to disable an extension for a specific tab, or specific host. You could hack something together via the management API that would disable extensions when you hit a specific URL, but that disabled state would be global, not local.
Extensions don't, however, run in Incognito mode (unless you explicitly whitelist them via a checkbox at chrome://extensions): that might be a decent workaround for you. Load your in-development site in Incognito, work with it there in a clean environment, and pop back into your regular window for normal browsing.
You could, of course, accomplish the same thing by setting up a specific profile for development in which you simply didn't install extensions.
These are workarounds, of course. You should feel free to file a feature request for more granular user-side control over when extensions are loaded: http://new.crbug.com/
Would running 2 separate instances of Chrome be of help for you?
(You can start 2 unrelated Chrome browser instances from a command line specifying different user directories: chrome --user-data-dir=userdata1 & chrome --user-data-dir=userdata2 )
I haven't tried it for your usecase, but it sounds reasonable.