When I view my extension with the developer tools, I only see the generated background file, background.js; my content script doesn't appear under the content scripts tab. Any ideas why? The relevant part of the manifest looks like this:
"content_scripts": [{
"run_at": "document_end",
"js": ["postMsg.js"],
"matches": ["https://groups.google.com/forum/*"]
}],
postMsg.js gets injected into the page, but never appears in the developer tool window, so I'm unable to debug it.
As long as you are on a page that matches the "Match patterns and globs" from your manifest, you will see the content script(s) under the Sources -> Content Scripts pane.
You may need to refresh (F5) the page (and/or your extension, then the page) to see it:
(Click for larger image)
For more information on matching that cryptic number to an extension, see this answer.
content scripts as a js file are never exposed by pages which are injected.. If your intention is debugging of content scripts it can be possible;
Ex:
mycontentscripts.js
var getStyleofbody = document.getElementsByTagName('body')[0].style;
to debug this i would first run this code in console of page that i am going to inject; After i get expected results i will move code to contentscript js file.
However for any errors after injection you can look at developer's console panel for all errors(they are listed there).
Let me know if you are confused
In 2018, if for some reason you've missed it:
Press the >>. From there select content scripts, and you'll be able to see the content scripts.
hf :)
Related
I've just started a project to learn Angular2 and Typescript+Javascript. I come from a Java background and my approach to debugging projects is usually a combination of stack traces, compile errors, and - on larger projects - lots of test cases. However, much of this doesn't seem to directly translate to the world of web-dev; particularly debugging my code that's interacting with Angular2's libraries.
Could anyone suggest any approaches that I can take to debug code working with Angular2? Specifically; how can I see what parts of my HTML/TS is causing issues? I've checked the console, from which I can see that I've broken Angular2, but it doesn't seem much more informative from that.
Just to clarify; I don't want help for this specific instance. I'd like to learn how to diagnose+fix these problems myself.
Assuming you're using Chrome, you can put breakpoints in the "sources" tab in your console. Those breakpoints can be set on the ts files. If you need informations from the js file, you can uncheck Javascript sourcemaps in the console settings: this will allow you to put breakpoints in the js files.
On a breakpoint, you can do the usual (watch, spies, stack trace, etc...). You can also write js in the console accessing local variables directly, for instance:
function b(){
var c = 1;
// if you put a breakpoint here and type c in the console, it will write "1"
}
Specifically in angular 2, you might want to add breakpoints in the "throw e" lines in their library, you'll get more detailed stack traces. If you click on the "..." in their stack traces, you'll get access to your file that caused the error.
That's for actual bugs. Now, for performance, on the "timeline" tab, you can click on the "record" button on the top left. Once you're done recording (click "finish"), you'll see CPU usage. You can zoom on events in the timeline to see which part of the code is using up too much resource.
You can also track memory by checking the "memory" checkbox.
If you need to debug an iframe, there is a select box in console saying "top frame" which you can set to whichever iframe you want.
If I've forgotten anything important, just ask :).
Open web developer console, go to "Sources" section. Press "cntrl+p". A search box will open where type ".ts" and find your file or directly search your file like "myfile.ts". Open it and you can put breakpoints directly in the code, the same way we put breakpoints in a js file and Voila, you can debug Typescript.
I think this doesn't just hold for Angular2, but given you come from a Java background I assume this is more like "how do I successfully debug JavaScript web apps" in general.
Related to this I highly suggest you to take a look at the Chrome Devtools page (given you use Chrome which has very neat devtools build-in).
On that page there are a lot of useful tutorials. Specifically in your case probably the article on Debugging JavaScript which has some cool tipps like conditional debugging, breaking on DOM modifications, even break on caught/uncaught exceptions etc.
I also often suggest people to do the free Code School course on Discover Devtools which is nice as well.
In the case of TypeScript, also make sure that you enable sourcemaps. As you probably know TypeScript isn't directly executed by the browser, but rather it is being "compiled" (or as it's called "transpiled") into JavaScript. That said, you probably don't wanna debug the transpiled JS but rather the TypeScript code you wrote. To enable sourcemaps, set the proper flag in your tsconfig.json:
{
"version": "1.6.2",
"compilerOptions": {
...
"sourceMap": true
},
"exclude": [
...
]
}
If you are coming from the Java world, there's a good chance you are already using IntelliJ IDEA from JetBrains. If so, then it is possible to debug JavaScript (and TypeScript) applications directly in the IDE using the same interface you use for Java applications.
JetBrains has some documentation on the subject that might help.
As was said in other answers, you can also use the Chrome Inspector's debugger. Personally, I greatly prefer using IntelliJ to do that instead.
If you are just looking for examples on how the workflow goes, then take a look at this Github project that shows the use of Webpack with Angular2.
I'm injecting a css file from my chrome extension using the manifest.json (full source):
"content_scripts": [
{
"matches": [
"http://*/*"
],
"css":["src/inject/gfi_extension.css"],
"js": [/*...*/]
}
]
In Chrome Dev Tools, if I inspect an element which is affected by the injected css, the rules are visible, but in the upper right where the source filename would normally be, it just says "injected stylesheet." I'd like to view ALL of the rules being injected, even those that affect elements which do not currently exist in the DOM.
I would have expected the .css to appear in "sources" under "content scripts" with the .js files, but they aren't there.
Is there a way to view the .css file through dev tools? If not, please explain why there isn't.
Edit: I've just found that this question also appears as a "sub-question" of this one, however no one over there has attempted to answer it, even though there is an accepted answer.
Looks like there's no way to do this if you inject the CSS via content_scripts. I filed a bug here: https://crbug.com/800070
When the extension is in your control, Paul Irish suggests using this code pattern in order to make your styles inspectable: https://github.com/lateral/chrome-extension-blogpost/compare/master...paulirish:master
For other people's extensions, as far as I can tell there's no way to view the source code of the injected stylesheets in DevTools, if you go the content_scripts route.
Go to Sources and then Content Scripts. You have to go to the extension name and then you'll see the injected files.
Use the Chrome App and Extensions Developer Tool on an extension which injects CSS, such as Bootstrap Grid Overlay:
the injected URL can be used on the console tab on the app to get the runtime URL using the getURL method:
chrome.runtime.getURL("src/grid.css")
and produce the source:
References
Content Scripts - Google Chrome
chrome.runtime - Google Chrome
I see this one time, and know that it not so hard, but can't find any solutions in internet.
Let say I have plugin, as you know it written by XUL. XUL like HTML has tags, js and etc. So I want to debug it with Firebug.
But in default plugin view firebug (as all other plugins disabled). So i need to open my plugin like Web page.
I remember that it's something like
chrome://address/to/my/plugin/page.xul
Does anyone face this problem?
There is no general rule by which you can build the addresses of extension pages. You have to open the extension's XPI file (it's a regular ZIP file, rename it if necessary) and have a look at chrome.manifest inside. E.g. in Firebug's chrome.manifest it says:
content firebug content/firebug/
Which means that the files in the content/firebug/ directory of the extension are accessible under chrome://firebug/content/. You can try opening them as web pages but they won't necessarily work.
A better approach would be using tools that are actually meant for extensions. For example Chromebug or DOM Inspector.
I've created a couple of Office plugins. The plugin shows a set of html files installed on the clients computer. The plugin uses a COM-accessible assembly which shows a WinForm with a WebBrowser on it. The plugin makes the WebBrowser navigate to a file on the clients computer. The assembly is also used in other programs to show the same information.
When showing the local html files using a 'normal' browser (e.g. double clicking a file in Windows Explorer) the browser popup a security warning about running active content. This is because we have some javascript in it. This warning is supressed by setting the 'Allow active content to run in files on My Computer' in the Internet Explorer settings. This solves the issue using a 'normal' browser.
Funny enough the 'active content' warning is not shown when getting the same file using a Word/Excel/PowerPoint plugin. It calls the same assembly, using the same WinForm and using the same content. Despite the setting 'Allow active content to run from My Computer' being false, the content is shown without a warning and the javascript is executed.
Now, the problem and the real question is that Outlook does the reverse. No matter what I use for 'Allow active content to run from My Computer' the browser warning about the active content in the html file is shown. When I confirm the message and allow the scripts to continue, the javascript runs fine. So, even when I set the 'Allow active content to run from My Computer' to true, the warning is given.
I've gone through all (sort of) relevant settings in Outlook, but nothing helps.
I assume that Outlook is using some kind of private context for a webbrowser (probably because it is using a webbrowser object internally).
The real question is: how can I make the Outlook plugin respect the IE settings?
(I understand this is a long story and maybe not clear enough. Please let me know if I have to elaborate more).
I couldn't get rid of the security warning without lowering the security setting. And that is not an option: we are talking about a project that will be installed on millions of computers.
I decided to go another route. Let's see if we can make the browser trust the html pages. So, what to do to get rid of the 'Active content' warning.
First I investigated what exactly triggers the warning. That was easy: any tag in your html file will do. And I need script, so removing that isn't an option. But, when hosted from a website, the scripts run fine and don't suffer from a warning. So, I investigated if it is possible to run my files in the Internet-context.
I found out there is a way, at least for IE (which in my case is sufficient). If you save a webpage as a complete HTML file from IE, the browser adds a comment to the html to signal its origin. Something like: . If you later open that stored html file, the file is shown in the Internet context.
So, I tried adding to the html file. And, voila, the file is opened in the Internet context. The security warning about active content is gone and the scripts are executed fine.
But, that raised another problem. We have a couple of window.open statements in the scripts and using that causes he cross domain browsing problems that in recent IE versions are blocked. Even if you use a relative path in the window.open call, if fails and you end up with a blank window.
In our case, we can (probably) decide to get rid of the window.open calls. But, if a reader ever finds a solution for using window.open in this scenario, I would be very happy if you let me know.
So, for now: case closed...
Internet explorer use Mark of web in such cases
<!-- saved from url=(0014)about:internet -->
<!doctype html>
<!-- saved from url=(0023)http://www.contoso.com/ -->
<html>
<head>
<title>A Mark of the Web Example.</title>
</head>
<body>
<p>Hello, World</p>
</body>
</html>
More info from here
https://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
How do I access user preferences in Firefox? I have the following code:
var control = document.getElementById(control_id);
if (control) {
control.setAttribute('color', nsPreferences.copyUnicharPref(prefstr, default_val));
}
But when I run this, I get the following:
Error: nsPreferences is not defined
Source file: chrome://backgroundtoggle/content/options.xul
Line: 9
I'm having trouble wading through the Mozilla documentation. How do I make this do what I want?
It looks like you need to include nsUserSettings.js in your .xul file:
<script type="application/x-javascript" src="chrome://global/content/nsUserSettings.js" />
This is where nsUserPreferences is defined.
See here for an example options.xul file. The script tag should be the first child element of prefwindow to ensure it gets loaded before your own code does.
Additional Information
This looks like a decent tutorial on how to write Firefox extensions. It seems to do a good job of consolidating all the relevant information on mozilla.org in one place, and contains links to mozilla.org when you need more details on a topic being covered. I do wish the navigation was a little better, but what can you do? Use the navigation pane on the left-hand side and click Tutorial to get started. You have to move through each section using the navigation pane, which took me few seconds to figure out, as I was looking for 'Next' and 'Previous' links on the page.