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?
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 have a bundled and minified file and a source map. I added this source map in the chrome dev tools by right clicking in the source and selecting Add Source Map.... That seems to work (although I suspect that something is getting mixed up). The original files now appear in the devtools. But now some of the lines have a gray background (e.g. line 17 in the screenshot below). What does this mean?
The gray background indicates that the source map doesn't include those lines. Sometimes source map generators only supply source mapping for lines that differ or have the potential to differ from the underlying code. In these cases, unmodified lines will have a gray background.
See https://github.com/babel/babel/issues/1318 for an example of this.
Also see What are these grey lines in the Chrome sources panel? for a similar question.
I came across this short video about Tracing paint operations in Chrome Canary
I have tried all the options and I can't get to these brilliant features.
1. Paints (snapshots):
2. Layers view:
The video is 1 year old now (it is from April 2013).
Are these features still available?
If yes, how to get to them?
I was able to show layers and snapshots using the following settings. Note that on the left pane the fully set of options is not visible in the screenshot, however the only item that is checked on the left pane is 'gpu'. All options on the right pane are visible. A smaller number of settings is likely possible:
Here's a snapshot of what I see. Note that the snapshot includes a full rendering of the webpage:
My Chrome version is 36.0.1985.125 (Official Build 283153)
Can't seem to find anything online. Frequently spend time editing multiple text documents at the same time and loose track of which ones I have edited. When I close I am not always sure whether I have purposefully changed or accidentally edited a character in a file. Would be great to have a feature to show the edits since last save for sublime text.
Seems like such an obvious need that I am surprised that I cannot find anything in features. Am I missing something or am I the only one with this need?
I know this already has an accepted answer, but it is not necessary to install FileDiffs or anything else. Just right click on the modified window and select Show Unsaved Changes.
A pane will show up at the bottom, listing the differences. There isn't an obvious way to dismiss the pane, but Ctrl+F will replace it with the search pane again.
Add this line to your Preferences.sublime-settings file (If you're on a Mac, then open the Sublime Text 2 menu -> Preferences -> Settings - User):
"highlight_modified_tabs": true
This will highlight tabs that have unsaved changes.
You may use the "Marking Changed Rows" plugin, which places a small gutter marker for lines with unsaved changes.
You can install the FileDiffs plugin which among other useful things will give you a diff between the current (edited) file and what is saved to disk.
Show Unsaved Changes
Right-clicking anywhere in the file has long provided an option to show all unsaved changes.
It will list all changes in the dialog area also used for find/replace.
This should work for Sublime Text 2 and 3.
Incremental Diff
A more recent version of Sublime Text 3 added an Incremental Diff feature.
The gutter shows which lines have changed.
This works both for unsaved changes, as well as changes between file saves or git commits.
It can be configured to show diffs against: the last saved version (git not needed), git Head, or (via the API) any other content.
Show modifications:
Right-Clicking the
gutter marker, or
any code next to the gutter marker
(aka any area of modified code whether or not your theme shows gutter markers)
brings up options to:
show the diff versions inline, or to
open a dialog showing all tracked diffs
Or you can use the menu item:
Edit -> Text -> Toggle -> Hunk Diff
Or the shortcuts:
Ctrl + / (on Mac it's the clover icon, not Ctrl)
Or this shortcut variation, which will also close/hide all other diff Hunks
Ctrl + ; (on Mac it's the clover icon, not Ctrl)
I'm unaware of a menu item to show all unsaved changes.
Menu Items and Shortcuts are available to navigate between changes, and revert individual (inline) changes. (see linked doc above for details).
minor caveats:
your theme must support diff styling to be able to see the gutter markers. The docs indicate how to add custom styles if you use an older theme that does not include the necessary styles.
However, functionality should still work, even if you cannot see the gutter markers, as long as the option is enabled in your Preferences file.
if you make an edit, then change it back, the buffer will still be tagged as having (2) changes, unless you reverted via Undo (ie Ctrl-Z). It is not a "file diff" as much as it is a tracker for the edit buffer, which stores what and where. However, the Show Diff Hunk option will show you whether the change was "important", an actual file diff, or not.
Navigate:
To navigate between modifications (whether or not your theme shows gutter markers):
Ctrl + .
Ctrl + ,
menu Goto -> Next Modification
menu Goto -> Previous Modification
Revert a Hunk:
With cursor over modified code or gutter (whether or not your theme shows gutter markers):
Ctrl + K, followed by Ctrl + Z (on Mac it's the clover icon, not Ctrl)
menu Edit -> /Text -> Revert Modification
This will only act on the diff Hunk that is at the location of your cursor.
It will not have any effect if your cursor is not in an area of modified code / diff Hunk.
Here are the Sublime Text 3 SETTINGS that control the Incremental Diff feature:
mini_diff controls the incremental diff functionality (on / off / on for Git only)
Valid values include:
true – always enable incremental diff (the DEFAULT) (Git or Not-Git)
"auto" – enable incremental diff for files in a Git repository (only)
false – disable incremental diff
git_diff_target controls the behavior of incremental diff for files in a Git repository
Valid values include:
"index" – diff against the Git index (aka staged for commit), (the DEFAULT)
"head" – diff against the file at HEAD (aka last commit in checked out branch)