I'm using Cesium JS which is a WebGL mapping framework.
When changing tabs on Chrome, after a while when switching back tabs to the Webgl page, there is a grey screen. I understand that Chrome disables Webgl rendering when the tab is inactive for a certain period.
How can I reset or start Webgl to start rendering again when the Tab is back to active?
I noticed when physically changing the browser window size this will re render webgl but I can't programmatically set window size on tab focus.
Just check, may be context was losted, if you will see this log, just refresh youre context
canvas.addEventListener("webglcontextlost", function(event) {
console.log('lost');
event.preventDefault();
}, false);
good source for you
Related
Extension testing.
On creating a popup window in a background page command handler triggered by a global keyboard shortcut, when Chrome is not the active app, Chrome does NOT become the active app, the popup window does not have focus.
chrome.windows.create({focused: true})
But if I immediately do an update after the create, setting focused=true, the popup window becomes active/focused, and on close, the previous focused Chrome window becomes active.
chrome.windows.update(window.id, {focused: true})
This seems like inconsistent behaviour.
A bug that I should report, or leave it alone and hope the Chrome team don't change it later?
Now that Firebug is fading away, Firefox users are asked to switch over to the Firefox Developer Tools.
Therefore I am wondering, which features do the Firefox DevTools have that are not offered by the Chrome DevTools?
Can you please give me an objective answer to this question?
From the docs:
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
(You'll notice properties of the object are not usually listed in console in Chrome, you would never know that body.innerHTML existed, looking at "document.body" in the console.)
Developer Toolbar
A command-line interface for the developer tools.
Shader Editor
View and edit the vertex and fragment shaders used by WebGL.
Web Audio Editor
Examine the graph of audio nodes in an audio context, and modify their parameters.
Taking screenshots
Take a screenshot of the entire page or of a single element.
Some extra tools in the settings panel:
Measure a portion of the page
Scratchpad
The network panel shows the stack trace of the cause of each network request, in Chrome you have to go through console log of network requests and find the one and expand it. Also, you can see the actual preview (in preview tab) of a xhr response if it happens to be html returned.
And perhaps the most useful, the inspector shows (ev) beside every element with an event listener on it, with direct listing of everything that adds event listener to it. (nicer than Chrome's event tab listing to the right.)
Firefox DevTools
As far as I can see, the Firefox Developer Tools (as of Firefox 54.0.1) have a lot of niche features over the Chrome Developer Tools (as of Chrome 59.0), i.e. very specific tools that are presumably used by a rather small group of people. Besides those special tools, the Firefox Developer Tools also have several core features the Chrome Developer Tools are missing.
The different features are:
Canvas Editor
Web Audio Editor
Shader Editor
Developer Toolbar (GCLI) (will be removed)
Scratchpad
DOM Inspector
Page rulers
Screenshot tools
Font Inspector
Grid Inspector
Measure portions of the page
Firebug theme (got removed in Firefox 61)
Switch between iframes
Tools to debug the browser UI
Security info for individual network requests
Network caching comparison
Chrome DevTools
The Chrome DevTools (as of Chrome 59.0) have more features regarding the standard tools and they provide other niche tools.
Those features include:
DOM and XHR breakpoints
Event listeners panel
Properties panel
Security Inspector
Audits
Touch simulation and pixel density in device emulation
Live editing in Sources panel
Workspaces
Network request blocking
Advanced memory tooling
Manifest, service worker & application cache inspector
Scroll performance issues highlighter
Frames per second meter
CSS Media emulation
Global file search
Code coverage analyser
Geolocation, orientation, and touch emulation
Local overriding of CSS styles
Also, they differ in many smaller features and in their settings.
Some extensions' popup windows don't fit nicely into the page. If I can zoom out on the popup window, I can use it as normal, but there's no apparent way to do this.
Example screenshot:
you can see that the popup window extends below the visible portion of the screen. There's a button on the bottom that says "record tab" which I can't manage to click.
My chrome build:
Version 52.0.2743.116 (64-bit)
Platform 8350.68.0 (Official Build) stable-channel orco
Firmware Google_Orco.5216.362.7
All this is with my page zoom set to 100% and font-size set to medium in the about://settings menu.
Adjusting the page zoom to 75% in about://settings fixed it for about 30 seconds but the popup soon reverted back to its original zoom level.
The accepted answer mentions going to the extension's options page to reset the zoom, but many extensions don't have/need an options page.
If that is the case:
Open the popup
Right-click and "Inspect"
A "Developer Tools" window should open, and in the title bar it should say the name and path of the popup html file, like this: chrome-extension://[the extension ID, a long string of random letters]/popup.html
Open that long address in a new tab, and it should show the normal popup content. (Instead of typing out the extension id manually, it can be copy/pasted from chrome://extensions with "Developer mode" on.)
Reset the zoom there to the default 100% (ctrl+0), as most extension developers will design and test assuming 100%.
The key point here is, the zoom is global/consistent across all of the extension's pages, including the popup, which is why zooming the "options" page works. Any page beginning within chrome-extension://[the extension ID] will have the same zoom as and affect the zoom of all the other pages.
For example, my extension's popup has a question mark icon that navigates to a separate help.html page still within the popup, and the zoom there affects the main popup.html zoom as well.
This also applies to webpages. Zoom is maintained over all pages from the same domain. If you zoom from 125% to 150% on one stackoverflow.com question, a different stackoverflow.com question in another tab will also zoom to 150%.
The zoom setting for a Chrome extension can be managed on that extension's options page:
Right click on the extension
Click on Options
Zoom In or Out using ctrl +/-
Now, click on the extension and watch the magic!
Google Chrome saves your zoom levels on a per-site basis. When one adjusts the zoom level on an extension’s options page, that level also applies to that extension’s popups.
Source: How to prevent zooming in popup window in my Chrome Extension
Depending on the extension, opening the popup HTML separately might not be feasible. I suggest setting the non-standard CSS zoom directly for the extension's popup:
Open the extension's popup and right-click.
Select Inspect to open the Chrome Developer Tools.
Select the html tag in the Elements tab, and add to the styles the zoom property with the desired value. To zoom out, use a value < 1 (e.g., 0.75).
I have a web app with a chat that opens in a new popup window. Normally, in Chrome I can hit F12 and click the icon of a smart phone to toggle it. But in the popup window this icon does not appear. This is important for me since I need to throttle the connection of the popup in order to simulate a user disconnecting from the chat.
Thanks!
It doesn't seem to be currently possible. I've opened a ticket for you. Meanwhile you have couple of options:
open popup in a regular window (copy paste the url, or modify window.open call to open a new tab instead of a separate window),
create a Chrome extension that uses debugger API to send emulateNetworkConditions message to your popup window
or try hacking DevTools like so:
open DevTools (A) for your popup
focus on DevTools window and open another DevTools (B) for that window using a keyboard shortcut (F12/alt+cmd+J)
in the console of the DevTools B call WebInspector.overridesSupport.setEmulationEnabled(true) (to enable emulation) and then WebInspector.overridesSupport.settings.networkConditions.set({throughput: 1.5 * 1024, latency: 40}); (to enable network throttling)
Perhaps easier way as of today is to install chrome extension which will allow you to open preview in new tab instead of popup. There you can have the same icon to toggle to mobile. Below is the extension:
https://chrome.google.com/webstore/detail/tag-assistant-companion/jmekfmbnaedfebfnmakmokmlfpblbfdm?hl=en
In chrome developer tools you're able to inspect the listeners attached to an element.
The listenerBody is clipped because the inspector isn't big enough to show it in it's entirety. How do you view the entire listenerBody?
It seems you can jump into the method using listener breakpoints. See How do I view events fired on an element in Chrome DevTools? for details.