google-chrome-devtools

I am developing a web application with a heavy front-end approach. By using Dojo and the AMD-way, I currently have testing screens which may easily load over a hundred different javascript files. When I want to debug for any specific problem, or verify if I am seeing an old version of a specific file, I find it really hard to find my files in the Sources tab in the Chrome Developer Tools. Is there any shortcut or action I can make that will let me type the name of a file and will take me to the source of that file? CD.. While in the sources tab use CTRL + O ( ⌘ + O for Mac) to search scripts,

When I use the Developer Tools in Chrome to collect JavaScript CPU Profiles, I am getting two mysterious warnings on functions: Not optimized: optimized too many times Not optimized: inlining bailed out What do these actually mean? and what are some possible solutions? Another one I've seen is Not optimized: TryCatchStatement , but that makes sense. Solution is to remove the try-catch. The closest attempt at an explanation I've found so far was this - https://github.com/GoogleChrome/devtools-docs/issues/53 David I believe that "Not optimized: optimized too many times" refers to when the chrome

How do I undock the Chrome Developer Tools in Chrome? Pressing the left bottom corner just moves it to the right side. (source: github.io ) DarkWanderer Click the vertical ellipsis button ( ⋮ ) then choose the desired docking option. (the docking option with the red circle around it, is undock) For older version of Chrome, press and hold the corner button You can also undock/dock-to-left/dock-to-right/dock-to-bottom from the Command Menu. Press Cmd + Shift + P (Mac) or Cmd + Shift + P (Windows, Linux, Chrome OS) to open the Command Menu, then start typing bottom / left / right / undock .

When debugging in chrome, the scripts are always paused in the debugger even if there are no break points set, and if the the pause is un-paused, it again pauses itself. What can be done? One possible cause, it that you've enabled the "pause on exceptions" (the little stop-sign shaped icon with the pause (||) symbol with in in the lower left of the window). Try clicking that back to the off/grey state (not red nor blue states) and reload the page. In my case, I had the Any XHR flag set true on the XHR Breakpoints settings, accessible over the Sources tab within Chrome's dev tools. Uncheck it

Why does my chrome developer tools show "Failed to show response data" in response when the content returned is of type text/html? What is the alternative to see the returned response in developer tools? I think this only happens when you have 'Preserve log' checked and you are trying to view the response data of a previous request after you have navigated away. For example, I viewed the Response to loading this Stack Overflow question. You can see it. The second time, I reloaded this page but didn't look at the Headers or Response. I navigated to a different website. Now when I look at the

I am trying to view, through Chrome's developer tools, how tooltips are structured on a site. However, even when I am hovered over the item, when I "inspect element", nothing shows for the tooltip in the html. I know I can set the Style to :hover , but I still can't see the html or css of the tooltip. Any ideas? Justin Chmura I actually found a trick to do that with the Twitter Bootstrap tooltips. If you open the dev tools (F12) on another monitor, then hover over the element to bring up the tooltip, right click as if you were to select 'Inspect Element'. Leaving that context menu open, move

The doc http://code.google.com/chrome/devtools/docs/elements.html says it supports XPath or CSS selectors, but when I tried, didn't seem to work for me. Any one knows how to use it? You can use $x in the Chrome javascript console. No extensions needed. ex: $x("//img") Yury Semikhatsky Just typing xpath expression in the search box should work. It works for me in tip-of-tree build. The feature seems to be broken in Chrome 11 though, I've filed a bug on this: http://crbug.com/79716 For xpath searches use $x('xpathSelector') . For a css selector use $('cssSelector') . However, this last selector

Often I want to inspect an element (e.g. tooltip) that only appears when another element is mouse overed/entered. The element that appears, is made visible via jQuery's mouseenter event. I can't inspect the tooltip, since the tooltip disappears when my mouse leaves the containing element. Is there a way to pause JS events so I could hover on the element, then pause the browser's JS, and successfully inspect it? For an example, try inspecting Twitter bootstrap's tooltips: http://getbootstrap.com/javascript/#tooltips . It's fairly easy in Chrome 38.0.2094.0. Here's what it'll look like: Step-by