If you are already debugging, you can **hover over the function** and the *tooltip* will allow you to navigate directly to the function definition:

[![Chrome Debugger Function Tooltip / Datatip][1]][1]


**Further Reading**:

* [Chrome DevTools > JavaScript Debugging Reference](https://developers.google.com/web/tools/chrome-devtools/javascript/reference)

  [1]: https://i.stack.imgur.com/axT3Y.png

Chrome's Developer Tools rock, but one thing they don't seem to have (that I could find) is a way to find a JavaScript function's definition. This would be super handy for me because I'm working on a site that includes many external JS files. Sure grep solves this but in the browser would be much better. I mean, the browser has to know this, so why not expose it? What I expected was something like:

- Select 'Inspect Element' from page, which highlights the line in the Elements tab
- Right-click the line and select 'Go to function definition'
- Correct script is loaded in the Scripts tab and it jumps to the function definition

First off, does this functionality exist and I'm just missing it?

And if it doesn't, I'm guessing this would come from WebKit, but couldn't find anything for [Developer Tool feature requests](http://code.google.com/p/chromium/issues/list?can=2&q=javascript+function+definition&colspec=ID+Pri+Mstone+ReleaseBlock+Area+Feature+Status+Owner+Summary&cells=tiles) or [WebKit's Bugzilla](https://bugs.webkit.org/buglist.cgi?quicksearch=javascript+function+definition). 

Find JavaScript function definition in Chrome

From the Chrome DevTool docs on [JS Debugging Reference > Watch the values of custom JavaScript Expressions][1], you can do it in 1 of 3 ways:

1. Highlight text, right click, and selct **`Add selected text to watches`**

   [![Add selected text to watches][2]][2]

  ***Note**: this used to be "Add to watch"

2. Highlight text and press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>
3. Add expression on the watch panel directly in the top right corner of the sources tab

   [![Add Watch Expression][3]][3]


  [1]: https://developers.google.com/web/tools/chrome-devtools/javascript/reference#watch
  [2]: https://i.stack.imgur.com/EwQCa.png
  [3]: https://i.stack.imgur.com/T4PnR.png


I can't seem to find a way to add a watch expression for the selected JavaScript text in Chrome developer tools, the same way I would in Firebug with Ctrl+W.  Is there really no way to do this in Chrome?  I can't even right-click the selection as it unselects as soon as I do it, and there is no "Add watch" context menu item.  Do I really have to type in every watch I want to add while debugging JS?

How to 'add watch' in Chrome developer tools?

### You can see all changes via the [Changes Drawer][4]

[![Changes Drawer][1]][1]


In Dev Tools, you can locate the Changes Drawer via either:

* **A)** Open Command Palette (<kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>) and type "*changes*"

   [![Command Palette > Changes][2]][2]
   <br/><br/>



* **B)** Open Drawer (<kbd>Esc</kbd>), click on the more options menu (triple dot), and select Changes

   [![Drawer Menu > Changes][3]][3]


### Further Reading

* [How to get a summary of your CSS changes in Chrome dev tools?][5]
* [Export CSS changes from inspector (webkit, firebug, etc)][6]

### Updates

* Dev Tools 98 added [More precise changes][7] to automatically pretty prints changes
* Issue #1296143 opened [User-Select: none in Changes drawer makes it very hard to utilize][8]


[1]: https://i.stack.imgur.com/Qrbn4.png
[2]: https://i.stack.imgur.com/sfvQJ.png
[3]: https://i.stack.imgur.com/ElnQk.png
[4]: https://developer.chrome.com/blog/new-in-devtools-65/#changes
[5]: https://stackoverflow.com/q/50642885/1366033
[6]: https://stackoverflow.com/q/3355111/1366033
[7]: https://developer.chrome.com/blog/new-in-devtools-98/#changes
[8]: https://bugs.chromium.org/p/chromium/issues/detail?id=1296143

Is there a way to get a list of the custom CSS changes you applied within the Chrome dev tools?

When you're playing with CSS in the Chrome dev tools to get your web page look right, it would come in handy to easily track the changes you made.

I know about workspaces, but the use case is an Angular 5 app where your CSS is bundled and possibly minified.

To clarify:

- I have a page that is looking pretty far from what it should look like 
- I do 20 CSS fixes in dev tools until it looks good 
- now I want to get a (CSS) delta from the original page so I have a list of changes I should now implement in the real CSS styles.