when i view the elements using chromes developers tools, in the BODY tag i see
screen_capture_injected=true
What does this mean? What does it do? I tried searching for it, but couldnt find anything.
In my case, I have installed the "Screen Capture" extension which I believe is the one adding this attribute.
It is a browser extension injection. I can be from any browser plug-in or extension. It allows newer browsers like chrome to do all the neat things to the web pages that we love (i.e., screen capture, Google voice links, greasemonkey editing, etc.)
Hope that clears it up.
Related
I am trying to inspect elements of a Form for an Apps Script. DevTools are available on every other page I load EXCEPT Google Forms.
I have searched in the devtools settings to find a blacklisted page, but nothing is there, also there is nothing in the registry for developer tools in the chrome folder.
I have found no solutions searching the internet for this, only general solutions when devtools is completely turned off.
I will add that I recently tried to use the "Dynamic Fields" add on for forms to accomplish the task of dynamic drop downs on my form before I decided to do it myself with Apps Script. This add-on probably does not want people peeking behind the curtain so they may have disabled the ability to see their code? Is this plausible?
This not only happens in google forms but also google classroom. Come to think of it, it looks like google is doing something with disabling Developer Tools on some of their sites. Others have complained that it is also disabled on their university/educational institution’s site. The main reason for this is to probably prevent “hacking” on these sites. Quick searches on google return almost no results on this phenomenon. It is definitely on a per-website basis, and probably not because of a local policy.
Update: If you are using Google Chrome as your browser, the devtools may not work on certain google products.
NOTE: This is for when individual webpages block inspect element, be sure it is enabled in the first place!
The Solution:
Use a different browser, as it seems to only happen on Chrome. (I used Firefox, but other browsers should be fine too.)
I have a webapp which is running perfectly well in most browsers, but I'm still trying to work out a few bugs which is preventing it from working correctly in iOS Facebook's in-app browser. Until I've got these sorted, I'd like to provide a message to give users the option to open the link in Safari.
The solution I have for now is to use javascript to detect the browser's user agent (similar to this question), and if it's the Facebook in-app browser, provide a message that the webapp is optimised for Safari and give instructions to copy and paste the link into Safari.
My question is this: is there a way to make a <a> tag open in a particular browser? I have seen questions like this one which seem to point to using target="_system" for Cordova apps, but is there a method to do this with html only?
There isn't a way to do this for Safari (using just HTML, anyway). For other browsers that have custom URL schemes, you could do it. For example, for Chrome you could have your link point to googlechrome://www.website.com.
The definitive answer: No, this is not possible.
As Andrew M mentioned, some browsers have some methods that do some things similar, but a pure html method to open a link in a generic browser does not exist.
I'd like to analyze the structure of some complex web pages that I've visited. Manually parsing out tags in the HTML source is tedious and prone to errors.
I'd like to find a utility that will accept HTML source (or a URL) as input, and show the hierarchical arrangement of the HTML elements, including source and id attributes, preferably in a treeview.
I was confident that it should be easy to find such a tool, but a few Google searches haven't turned up anything for me. I'm still confident that such a tool exists. Can the community help me find something? (I'm a Windows user and of course would prefer free if possible.)
IE8+ and Chrome both have wonderful developer tools built right in. Just visit a webpage and in IE, press F12, and in Chrome, go to wrench->tools->developer tools. They both show the tree view of the page as well as let you modify it. They're both very powerful.
Most browsers have a DOM viewer built in. Firefox has a third party extension that provides this.
These will all show the DOM after error recovery has been performed by the browser, before then you can't be sure that a valid tree could be constructed.
You can also use any good editor like Notepad++ which has highlighted syntax and node collapsing.
As other have mentioned, most modern web browsers have "developer tools" built into them which include a way to browse the HTML source in a tree-view. I've put together a quick screenshot comparison of the tools that the latest versions of the top five browsers (Internet Explorer 9, Firefox 4, Chrome 12, Opera 11 and Safari 5) offer.
Web Browser Developer Tools Screenshot Comparison
Use firebug or DOMinspector addon on firefox.
Download Firefox (http://www.mozilla.org/) and install the
Firebug addon https://addons.mozilla.org/firefox/addon/firebug/) BOTH ARE FREE
When I visit some websites, on top of the browser it promotes me to install Chrome Extension by saying "This website now has Google Chrome Extension... Install".
Anyone knows how to do this? Does Google already provide scripts to do this?
Example: Visit the following site using Chrome:
http://www.independent.co.uk
Now, it's possible to do what you need. Just follow this link, that explains how to use "inline" installation once you've published your app or extension at Chrome Webstore.
PS. Inline installation only works in Chrome 15+
Paul Kinlan's Badgemator is a good resource for this sort of thing. It creates a JavaScript snippet that you can put on your site in order to direct users to the webstore entry.
It doesn't attempt to mimic Chrome's infobar in the same way that The Independent does, but I personally think that's a good thing. Pretending to be part of the browser is a good way to confuse users, and isn't something I'd recommend (especially now that the infobar extends outside the browser window into Chrome's own UI).
What you're seeing is not built into Chrome, and not provided by Google.
The site will have some code that detects your browser agent (either via Javascript or a server-side script), sees that it's Chrome, and then adds some extra HTML/CSS/Javascript to make a mock UI element to grab your attention. Inspect the element to see what's really happening.
Another example is http://page2rss.com/page?url=www.stackoverflow.com/
Also, see Alerting website visitors that a chrome extension is available - how?
I wrote a jQuery extension that does just that: http://blog.dreasgrech.com/2012/01/promoting-your-chrome-extension-with.html
The simplest way to use it is to simply pass the ID of your Chrome extension:
$.fn.extInfobar({
id: 'nbilgjjflfiiijecdjpnbganoiafneph'
});
That generates the following:
From Chrome 15 there is API for this.
Just ask Chrome if your extension is installed.
You need to publish your extension in Google Chrome Extensions site, then you'll be able to publish it in your site.
You'll need to pay a one-time fee ($5) in order to get registered as a developer.
As of 06/12/2018, inline installation is deprecated. For more information, read our Chromium Blog post and Migration FAQ.
From: https://developer.chrome.com/webstore/inline_installation
The usual recommendations for a web development and debugging web browser are Firefox/Firebug or Safari/Web Inspector.
But I like Google Chrome, and would like to use this as my primary development browser. What plugins or tools should I get to optimise my web programming experience with Chrome?
Google Chrome's own "Firebug" is very good, just right click and inspect element to bring it up.
Frame two pages is helpful.
Chris Pederick's Web Developer toolbar is good too.
The Development and Coding Search (Chrome extension) is one of many Chrome extensions for developers. See the featured web development extensions for more developer-friendly extensions.
Pendule has a lot of good bits and bobs under one extension/icon. Few things I like about it...
View generated source
Colour picker
Ruler
Validator
There are probably tons of alternatives, but it's the best I've seen so far.