I've got a page which is used for keeping track of a collection by using check boxes.
The site provides no ability to export the checked items or view them in a consolidated view - you must scan over hundreds (thousands?) of boxes to see just the ones you've checked.
I'm looking for a way using Chrome Dev Tools (or other plugin/extension/etc), to somehow print a list, export, and/or highlight only the checked elements on the page to make it easy to view them all.
Thoughts?
Related
Both Chrome and Firefox provide "Network" pages in their DevTools, which are very useful. I'm working with software which adds headers to HTTP responses to communicate performance information. I would like to be able to see this information at-a-glance in the Network panel, but looking at the relevant Chrome and MDN docs, I can't see any way to modify existing DevTools panels.
Is it possible to do this? If so, how?
Both Google Chrome and Firefox allow you to modify the shown columns and to show specific header values. It seems however that only in Chrome you can also add custom headers.
To do so, open the Network tab in the Dev Tools and make sure there is at least one entry in the list. Then right click on one of the table headers (like Name, Path, Method, etc.) to open the context menu that allows you to select which columns you want to show. From this context menu go to "Response Headers" -> "Manage Header Columns...". Then in the modal that pops up click "Add custom header..." and enter the name of the header you want to show. Click "Add" and it should now be part of the overview table.
In Firefox it works the same, but you can only select one of the predefined headers.
Is there a way to show/hide a chrome extension's icon based on the current tab's URL/location?
I'm writing a utility that I only want to use on certain sites, and I would like to be able to access it in one click while on those sites (i.e. not in the extension overflow menu) but hide it otherwise.
The DeclarativeContent API almost provides what I'm looking for, but it only greys out the icon, rather than hiding it entirely.
Is this possible?
Unfortunately this isn't possible (anymore). Declarative content or not, the presence of your extension's icon near the address bar is only decided by the user by pinning/unpinning it from the extension menu. In older versions of Chrome using chrome.pageAction would result in the extension icon being shown inside the address bar only for the matching websites declared in the manifest. However, things changed a while ago (actually quite some time, maybe >1y, can't recall exactly when): now all extension icons are on the right side outside the address bar and can be pinned/unpinned by the user, meaning they are either always shown or never shown. Pinned icons that use pageAction are greyed out when inactive (see this documentation page).
(I am developing a Node.js/Express web application.)
Is there a way to identify a tab and have its identifier saved locally in the browser so that the identifier is persistent across different pages of the same web site?
Example, my web application is opened by the user in two tabs of the same browser. I would like to know that they are opened in different tabs. Even if the user in tab A presses F5 to refresh the page, I (in the client Javascript) would like to know that the page is still in tab A.
Is there a property of window or another object in the DOM that identifies the browser tab?
Nothing simple. However, there are two interesting technologies that may help you solve your problem.
sessionStorage is the closest to what you described. It gives each tab a different Storage object that you can store random IDs in. It doesn't quite work though, because when you open a link in a new tab the second tab gets a copy of the parent page's sessionStorage object, including whatever you stored in the parent page's sessionStorage.
The storage event is probably what you want to use. You can have your tabs communicate directly with each other to coordinate unique IDs or detect multiple tabs being open. See this question which is focused on how to communicate across tabs in javascript.
Some combination of these two technologies will probably help you solve whatever you are trying to accomplish.
I want to debug code at the same time as I see what is being sent on the network tab without having to go back and forth between the Network tab and Sources tab. Is there a way to do this as of chrome Version 52.0.2743.82 or Version 54.0.2810.2 canary?
I know that it is possible to log http request in the console which can be visible with other tabs open but I want the actuall networks tab if possible..
Thank you in advance
This is now possible in Chrome 87. Right click Network in the menu and select "Move to bottom"
and it will do this
You can view 'Quick source' while viewing the Network panel (or the other main panels) at the same. This will allow you to view the source and add breakpoints.
However, it's not possible to step through code using the debugging in the split view. Chrome will automatically switch to the Sources tab if you use the shortcuts.
It's also not possible to have an extension running a separate instance of the debugger as the Chrome Debugging Protocol doesn't allow simultaneous clients to be connected.
I will open up a discussion with other Chromium contributors into the feasibility of sharing the debugging controls in the split view. I don't know whether it will or can be done easily. I suspect it's a fair amount of work.
If you would like to set up the split view, as it's useful anyway, go to overflow menu on the right side and select 'More Tools' and then select 'Show console'. This makes sure the panel loads below the main one.
On the left side of the panel that shows, click the overflow menu and select 'Quick source'.
You will now see a small Sources panel.
Since I was referred here from this question, I'll answer here.
In my scenario I need to be able to work on two different source files (under DevTools->Sources) simultaneously, for instance an html and a css file.
My workaround was to work on two separate tabs.
Right click one of them and click 'Open in new tab'.
When the new tab is open press F12 to open DevTools, and dock the two editors side by side (Focus on one and pressing ⊞+→ then leftwards on the other one).
Result:
I'm looking to build a chrome extension that allows the user to have an independent subwindow that is the same in each tab (for example you are taking notes and the notes are synchronized among each tab). Also, clicking a link should not destroy this subwindow.
One solution is to inject an iframe in each tab, and try to synchronize this data serverside and send back to each client tab, as it is updated.
This seems very tedious, plus the iframe would be provided by a third party, and I want to make it the easiest for them.
Is there a way I can have a shared dom piece and display it in its current state across several tabs?
There's an API (still experimental as of Chrome 17) that does more or less exactly what you want. If you visit about:flags, and enable "Panels" (they're enabled by default in Dev and on Canary (and on ChromeOS)), you'll be able to use chrome.windows.create with a type of panel to create a floating pane that exists independently from the browser window. That would likely meet your need.
Take a look at the Google Talk extension for an example of how it might work.