I am learning chrome extension by example. Here is the example I currently learning: http://www.chrome-extensions.net/extensions/mappy/
There are three JavaScript files in this sample project: background.js mappy_content_script.js popup.js.
"mappy_content_script.js" is shown in the Combo box of Scripts tab of Developer Tools.
"popup.js" can be found if I right click the extension icon and choose "Inspect popup".
The problem is I can't debug "background.js" or find it in the Developer Tools. I tried insert "debugger;" in this JavaScript file. I also tried use profiling tool to record the script execution. However, when I click the link of "background.js", a blank page shows up.
Is this a bug of chrome or did I miss something? Thanks
background.js is loaded in the background. To inspect it visit chrome://extensions, find the loaded extension, and "inspect active views" for the background script.
Edit
Below is a screenshot of the chrome extensions page. A click on the link background page opens the background page for this extension.
Additional information
EDIT 2020
Here is how you can see the content scripts and debug,
Nowadays you have to install a Chrome extension to allow you to inspect the view of a page, specifically the Develop and Debug Chrome Apps & Extensions
There is an easy way to access your extension code in DevTool and debug it.
Open the DevTool (e.g. F12) , click on "Sources" tab
then look for "Content Scripts" menu next to Page , Filesystem, Overrides etc.
and click on it .
you should see all active extensions listed there and you can easily add break point to each js code and reload the page to debug through
Related
Is there a way to keep Firebug on a single page, so that when I switch pages it remains on the page I want it set to?
For example, I'm working on a project and I get an error that I want to search for on Stack Overflow, but when I navigate here, the console changes to reflect this site. I'd like to stop that from happening.
There is no option to "pin" a page's data in Firebug (as of version 2.x). As far as I know this also doesn't work in any of the browser built-in dev tools.
Though the simple solution for your problem is to open the other page in a separate tab or window. Doing so keeps all the data of the page saved when you switch back to the tab containing your project's page.
Note that Firebug's activation model is based on URLs following the same origin policy. I.e. if you open it for your project's page, it will always get opened for your projects page, even on other tabs, but not for any other site.
I've found it useful to split the tab of interest off into a new window and to activate Firebug on that window. That way I can continue using my original tab collection/window without it changing as I link-hop.
I just follow this tutplus tutorial for source map sass.
I cannot find Support for sass option in Experiment tab under the inspect element in chrome. Is it removed? Am I late to use this feature ?
My sass version is 3.3.8 (Maptastic Maple)
How can I make SASS editing work in Chrome Devtools?
I made it work. SASS support is no longer an experiment: It's now a standard.
I just follow simple steps to make it work.
1) Open your inspect element on chrome and click on gear icon which appears to the top right.
2) Enable the CSS source maps (which is I think its enabled by default. If not just check it. After enable the css source map don't close it.)
3) Click on Workspace tab on the left panel just below the General tab.
4) Add your source code folder by clicking the Add folder button (close the box.)
5) Go on Sources tab and find your scss file.
Now you can make changes and hit ctrl+s it will automatically change on your style.scss.
As of Chrome 75, here's how you turn on CSS source maps.
Open the browser's Developer Tools (Ctrl+Shift+I).
Open the dropdown menu in the top right corner, and click on "Settings."
Look for the checkbox that reads "Enable CSS source maps" and turn it on.
Just my 2 cents here. Kaspersky Chome extension was blocking my CSS mapping on Chrome Developer Tools. Didn't find anywhere how to add an exception to that...
I know Chrome's inspector has a selector to choose which frame to use with the console. Firebug has a similar command, cd(window.frames[number]). Is there anything similar in Firefox Devtools? I suppose frame.window.eval could work, but only if it isn't cross-domain.
I was also wondering if there is a highlighter to inspect results of Web-console commands, for example document.getElementsByClassName(...). but you can at least change style of an element programmatically to 'see' it.
DOMNode objects do highlight in the page on hover in the web console and what is called the "variables view". The "variables view" is used in the web console too when you click on an object to see its properties (it's the sidebar that appears), and is also used in the debugger when paused at a breakpoint (right sidebar that contains the various scopes variables).
So, anytime a DOMNode appears in there, if you hover over it, it will be highlighted in the page.
When it comes to iframes, the webconsole does support the cd() command, see working with iframes.
We are also actively working on a bug that will add a drop-down to the toolbox whenever there are frames/iframes in the current page and allow you to easily switch from one to the other.
You can click to inspect a node in the console and debugger starting in Firefox 29, currently on the Aurora channel.
Less than month ago, by accident I discovered a nice tool in Firefox that was installed by default. I don't remember the name (probably code inspector or something like that) but I used Ctrl+Shift+I (Tools -> Webdeveloper -> Name of tool) shortcut to run it.
What was the tool? The tool worked such that when you positioned the mouse over some place in the webpage, in the tool's window you would see the HTML code for that place. Now, I my system is updated, and this tool has disappeared from my browser. I'm very disappointed. Anyone know what tool I'm looking for?
Thanks in advance,
Kuba
By the sound of what you are describing it was probably the Web Developer addon, might also have been Firebug (which in my opinion is better).
You can try right clicking on the page element and select "Inspect Element" which will enable element inspection. This will enable you to view the HTML contents of the elements under your mouse.
The name of this tool is: Page Inspector
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector
I'm curious how a particular page does something and want to find out how it works. However, all the JS is obfuscated and minified. Is there a way I can get the chrome debugger or firebug to beautify all the javascript to make stepping through the code more useful?
Thanks
As of Chrome 12, you can right click in the Script pane and select "De-obfuscate source". See screenshots and more info at Sitepoint