Google chrome dev panel has many nice shortcuts and I've got used to them a lot.
There is almost only one thing what bothers me a lot and makes cry every time I have to do it:
I need to use mouse to switch state of all debug points at once.
For this I use now a button as shown on the following screenshot:
I wonder. Is there any other way to active/deactivate this button without mouse?
P.S.
Also this question is more about usage rather than programming I decided to ask it here because it's more likely to be answered by programmers.
Thanks.
On Mac you can toggle breakpoints with ⌘+F8
You must be able to toggle between enable/disable all the breakpoints (debugging rather) using Ctrl+F8 on any windows machine with Chrome as the browser of choice.
Related
This is a minor annoyance but I can't seem to find any solution.
I don't really like the console "drawer" (the console you see when you hit "Esc") and prefer to use the tab/page as I don't have a lot of space to devote to the developer tools. When you load a page with errors or warnings there's little icons on the far right that indicate counts of each, but when you click on that it always opens the "drawer" version of the console instead of the tab/page version. Is there any way to change this? (I vaguely recall that it used to always open the tab/page version before)
No, there is no way to customize such behavior. One thing you could do to slightly speed up things is to re-arrange panels in DevTools so that it is easier for you to get into "Console".
I usually have three chrome windows open. To easily distinguish my work chrome from the personal chrome window, I would like to set a theme to one window, and another theme to other windows.
I figure out how to change the theme globally, wondering whether its possible to it per window.
Use different profiles. You can do this in chrome by clicking the Proflile icon in the top-right of any window. It'll ask you to log in with your Google account but you're able to make a local account with any name.
I use one for personal (personal google account), one for work (work google account), and a third with no google account for risky or other website browsing (which has more aggressive blocking rules)
I do have in mind 2 options, since I really want to easily identify them.
You can add name to your window, not so noticeable since only shows on hover on mac.
You can also group all the tabs in that window, to give it a bit of a different color
which you can see here. blue and red. Bit noticeable.
for windows users, can you try this options, it might be better there.
I did some research into this issue, and it seems the only way to do this is to open different browsers e.g - firefox for presonal stuff, chrome for work etc...
will be happy to see a better solotion though...
In Firebug, when you edit an HTML or CSS element, the changes take effect on the screen after a short pause, even while still editing. In the Chrome and Firefox developer tools, the changes only take effect when you lose focus of the editing.
See a comparison below of editing in Firebug, where updates are made to the page while still editing the HTML:
Compare that to Chrome, which does not update the page after pausing:
This is extremely infuriating as it leads to less productivity in being able to change items on the fly with somewhat immediate feedback. With the Chrome/Firefox developer tools, you have to type, lose focus, see the changes, re-focus, type again, and then lose focus again.
Is there anyway to make this behavior on Chrome/Firefox more like Firebug? If not, is there any quicker way to see the updates without having to lose focus and re-focus on every little change? There's features in these other two developer toolkits I would like to use, but the inability to get more fluid edits is something very difficult to overcome.
In the Firefox DevTools there is currently no way to let their Inspector do the updates immediately. Though there's already bug 815464 filed to change this behavior.
A better workflow for them is to hit Enter after you've edited the value. Then you can open the editor again by pressing Space. Doing so you don't lose the focus.
The Chrome DevTools don't offer a way to do live updates when changing the HTML, neither. Because I couldn't find a related issue to improve the behavior, I requested this in issue 546883.
Their Elements panel allows a similar workflow as the Firefox DevTools' Inspector panel. There you can start and stop inline editing by pressing Enter or use the bigger HTML editor by pressing F2 and stop editing via Ctrl+Enter. Unfortunately Chrome's Elements panel does not focus the part you edited, so you either always start at the first attribute or you edit the whole element.
I am working on a web app that will be run off a local server on Windows 8 on Chrome. Unfortunately, Chrome doesn't seem to handle touch events very well. For example, often instead of clicking on a button, it will select it instead. Is there any way I can make it behave more like native touchscreen apps do?
I can't make it a metro app because I need to talk to a Python service.
I've done some testing in Chrome with a touch screen and don't seem to run into this issue (of course not doubting you are though!). If you have a site I'd be more than happy to check it out.
One option is to try scaling the content larger, I'm wondering if your touch surface is very sensitive to tiny movements upon touch and treating it as a touch/scroll ie select. Try a simple test in the browser to start by increasing the size before trying any css scaling transforms (which I'm not sure how in this how well that approach would even work)
What type of hardware is it being tested on?
Can you elaborate a bit more on the python service? What part of the service makes it so you can't interact with it? Is it just an http service object or something else?
First of all, I'm swiss, so forgive me if I mistake; My english is not so rich.
In tiapp.xml file I can see this directive <chrome scrollbars="true">true</chrome>.
It means that tideSDK uses Google Chrome? Or what else?
In other words: there is the possibility of missing functionalities depending the final user's configurations(Google Chrome not installed)?
Excuse me for the stupid question but I did not understand.
Chrome means the look - the outer decoration of the window. Another word might be "skin".
Enabling/disabling tells the framework to add the OSes native window decoration to a window - scaling borders on each side, a title bar with the window name, as well as min/max/close buttons - all this is part of the window chrome.
If you want to create 100% custom looking windows, you have to disable the window chrome.
Heads up! Scaling and moving of the window is automatically handled by the window chrome. If you disable it, you have to handle that functionality by yourself.
This is in no way related to Google Chrome :)