I'm playing with new-style packaged apps in Chrome 24, and I don't see any way to bring up Developer Tools to do debugging.
What's the recommended strategy for debugging?
go to here
chrome://inspect/
find the page you want
Starting on Chrome 24, you can right click and inspect your page or inspect the background page.
If your app doesn't have any open window to right click, you can go to chrome://extensions and use the Inspect Views links, from where you can open Developer Tools for any of your app pages, including those in the background.
Before Chrome 24, the only difference is that the background page could only be inspected using the chrome://extensions link, there was no "Inspect background page" in the right click menu.
UPDATE: If you want to debug an app installed from the Chrome Web Store, you need to enable the flag "Enable debugging for packed apps" in the chrome:flags page:
After that, right click will work on any app.
I've been able to right click the content area and inspect an element to get the dev tools to come up.
Related
So I have recently started working on building a Google chrome extension, and found the entire landscape fascinating to say the least. While I was checking to understand how some of these extensions work, I found that many of them have blocked 'inspect element'. I found only 'Adblock Plus' which allows it.
My question:
Are there any more complex interesting chrome extensions that allow inspection?
Any way to find such extensions or how to get around the ones that have blocked viewing?
As a beginner, I would appreciate any advice or tips in this area.
You can inspect and debug all extensions right in the browser.
You may need to use a different method of invoking devtools.
To inspect the popup you can enable developer mode switch in chrome://extensions and then right-click the extension's icon in the toolbar or click ... inside the puzzle piece menu that lists all extensions, then choose Inspect popup.
Similarly, to inspect something shown in the tab, you can open devtools via the standard hotkeys like (F12 or Ctrl-Shift-i in PC) when the cursor is focused on the toolbar even if the page actively intercepts these hotkeys and/or the context menu.
You can also open devtools from the browser menu "More tools".
There's also chrome://inspect.
I wrote a simple Google Apps script and published it in the Chrome Web Store as an app (I guess "hosted" app. You can find the link here: http://bit.ly/1JTiKLC). I followed the instructions mentioned here:
https://developers.google.com/apps-script/guides/distribute-web-app
I specified all the required items in the checklist, AFAIK, including icons of the required size. The item is listed and I can download it. However, when it is added in the Chrome desktop launcher, it has the default "apps script" blue icon:
I want to change this but can't find any way to do so. The link above specifies that there is a way to do this for a new tab page (sec. Updating a web app's icon on the New Tab Page). First of all, I cannot see any link that says "specify an alternative image" anywhere as they say. Could someone elaborate on this. Secondly, is there a similar way to change the launcher icon for apps script webapps?
Ok, I found it. Here's the info for someone else who may have the same question: The link appears in the window just after you click "Publish>Register in Chrome Web Store..." in the apps script editor itself. It's not there in the developer dashboard. You can host the image publicly on any site which provides direct links, like imgur.
This will change the icon in the Chrome new page tab (or in "chrome://apps/") as well as the desktop launcher. Cheers :)
I am learning to write chrome extensions. Sometimes ,i do want to learn from the examples given on the chrome developer site. As the instruction says, i need a browser_action or a page_action, then right click ,then inspect popup. I am wondering whether there is other ways to debug the chrome extension.
And the other thing is , i have to write "window.reload(true)" in the debug console to reload the popup page, is there a better or more convenient way to do it?
Of course it's not needed. Your extension either has a popup of some sorts, a background script of some sorts, or a content script of some sorts.
You already know how to debug a popup.
To debug a background page, you can go to chrome://extensions/ with Developer mode enabled. Then you'll see a "background page" link next to extensions that have them - you can click that link to bring up Dev Tools for the extension.
To debug a content script, you should look into the page's own Dev Tools. The console output will be displayed alongside normal console. To type code in the console to execute in the extension's context, you need to change the the context from <top frame> to the extension in the UI:
Depends on what you want to debug.
Chrome extensions also have background page and content-scripts.
Background page console you can find here: open chrome://extensions/ and under extension you'll see "Inspect views".
Content-scripts print messages to the page console.
Popup and other pages you can open in normal tab and inspect in its console. They are accessible by the url: "chrome-extension://YOUR_EXTENSION_ID/path/to/popup.html"
I have successfully whitelisted my Chromecast device, however while trying to whitelist a local Chrome App as a sender I have run into difficulty with the instructions saying
Be sure you are running Chrome version 28 or later.
If you haven't restarted Chrome in a while you may be running an older version; restarting will update Chrome automatically.
In the Chrome omnibox, enter chrome://extensions, and check the Developer mode checkbox to enable developer mode.
Install the Chrome extension for Google Cast.
5. On the Cast icon in Chrome's upper right corner, click four (4) times.
6. In the Cast extension, scroll to the Developer options.
7. In the Cast SDK additional domains field, click Add and enter the domain of your application, for example, "www.mydomain.com."
Code your application's HTML tag as follows:
When I click on the chromecast icon 4 times I get no developer menu, making it impossible for me to whitelist my chrome app. Am I doing something wrong or going about it the wrong way?
I am using Chrome 28.0.1500.71 on Mac OS X 10.8
Open up Chromecast options from the extension, and then click the cast icon in the top left corner repeatedly (4+ times), and developer options should show up at the bottom.
Documentation is incorrect, found this out through trial and error.
The documentation is currently incorrect. To view the developer SDK menu, click the chrome cast extension icon in chrome, click options, then click the google cast icon in the upper left corner a bunch of time. It isn't 4 times, but if you click 4 times, wait and click twice more, I've been able to get it to come up.
This will give the option to input a domain which will cause the google cast extension to inject the API into pages on that domain.
Make sure not to include http or the path. In my testing it seems to wildcard match so example.com will match cast.example.com and castqa.example.com.
Right click the chromecast icon and goto options. Then click the icon at the top of the page 4 times.
I personally had to click options then right click on the option page and inspect element. In the Div with the class options-selections class on it change the 5th section element to display:block;
Or.. Goto the console and put this in:
first = document.getElementsByClassName('options-sections')[0]
first.getElementsByTagName('section')[4].style.display = 'block';
If you look around there are other sections hidden in here. Might be other goodies of use.
I have checked many questions and answers regarding how to stop any browser at any time, but I have not found a solution to my problem.
I have a logout button in my application, and when I press it, it adds some classes to an <a> tag. Is there any key/shortcut to stop the Mozilla/Chrome (any browser) to perform the actions or stay the same page?
What I believe you're looking for is a debugger with breakpoints. Breakpoints allow you to mark certain sections of your code as points where you want the execution of that code to temporarily pause its state until a point in which you are ready to proceed to the next breakpoint.
Modern browsers, such as Google Chrome (or any other WebKit browser like Safari) or Mozilla Firefox with the Firebug Firefox extension have this capability.
Chrome (WebKit Browsers):
You can set breakpoints in your JavaScript in the "Scripts" tab of Chrome (and most WebKit browsers):
From Chrome Developer Tools: Script Breakpoints:
Open the Developer Tools by hitting the Control-Shift-I shortcut
Open Scripts panel and select "script.js" from scripts drop-down
Set breakpoint on line 19 by clicking the line gutter (you can use the Control-G shortcut to reveal a line in a large file)
Move your mouse over this page
You should stop on the breakpoint
Hover over the source code to inspect local and global variables, function arguments etc.
Delete the breakpoint by clicking the blue tag breakpoint indicator
Click the Continue button or hit F8 in Developer Tools window to resume
Firefox with Firebug:
There are countless demonstrations of Firebug Breakpoints and other debugger functionality located on this page.
The functionality is very similar to that of the Developer Tools in WebKit browsers.
Internet Explorer:
Internet Explorer also has built in Developer Tools, which among many other features gives users the ability to set breakpoints and stop execution of the scripts. While the Chrome Debugger is sufficient in many cases, there are certain bugs and cross-browser issues that tend to affect Internet Explorer more so than other browsers.
Thus, the Setting Breakpoints section of the "Debugging Script with the Developer Tools" page will be most helpful when attempting to resolve issues that only affect Internet Explorer.