I want to create a FireSass plugin for Chrome I couldn't find any API that can manipulate the Chrome Dev Tools. I wonder if it is possible to manipulate it?
The chrome.devtools.* API methods can be used to change the panels in the Developer tools.
There is a new alternative to FireSass in Chrome. Even though it is listed as an experimental feature, works well for me.
Related
I used this nifty feature that chrome had for quite a while called "canvas inspector". It was an experimental dev feature that had to manually be enabled.
It was quite helpful when working with webgl via something like THREE.js where you can easily create a bunch of undesired draw calls by accident.
Also, it worked on any website, you could simply take a snapshot and see whats going on in the canvas.
It... miraculously disappeared one day, and google does not give any insight.
I've tried some extensions but they dont feel nearly as good, or i couldn't even get them to work. Is there another way to get this back into chrome?
Apparently it was doing some cheeky stuff that they didn't want in the main project so it was removed in this issue: DevTools: make Canvas profiler an extension
We can make it an extension though. This bug is for tracking removal of the canvas profiler from the DevTools. There will be a separate initiative of porting the code being removed into github and publishing it as a Chrome extension.
According to that issue they might move it to an extension in the future but I haven't found any traces of it as of now. They haven't responded to a question in the above issue about where the new issue could be tracked.
Chrome and Firefox have both removed their Canvas inspectors...
Original Answer:
This is not exactly what the question asks for, but Firefox has a canvas inspector integrated:
https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/
You can enable it in the settings of the normal inspector
EDIT: (2019)
The Canvas Inspector has been removed as of Firefox 67:
Mozilla deprecated listing
Bug report with reasoning
Alternative:
spector.js - Recommended alternative by Mozilla
Canvas inspection was just removed!
You can download an old version of Chromium here like Chromium_OSX_43.0.2357.81.dmg. (Provided by freesmug)
Happy Canvas Inspection!
This is the best extension inspector I’ve seen so far.
https://spector.babylonjs.com
First go into
chrome://flags
Then enable
Developer Tools experiments
Then after restarting your browser, open the devlopers tools by hitting f12, then in the top right corner is a gear. Click on it, go to experiments, then find "canvas inspection". It's unstable, but usable.
XUL seems to be an API which enables you to create GUI based on Mozilla framework.
Can it also enable you to automate Firefox's GUI?
Which is the equivalent(s) for Chrome, that enables you to both create GUI's and automate Chrome's GUI?
There isn't one.
Extensions are Javascript. Chrome uses WebKit for rendering, so you'd use that to create a GUI.
I am fairly new to writing code, but I played around with some chrome apps which use WebSQL for DB. I decided to learn IndexedDB, but needed something more visual, to help me out. WebSQL database entries can be easily seen in in resources tab in "debugger", but indexedDB database is not shown there.
Chrome is v17, OS Ubuntu 11.10
Is there a workaround for this( plugin or anything else) ?
If you use Chromium or the dev channel of Chrome you can enable an experimental Dev Tools feature to surface IndexedDB in the Resources panel.
https://plus.google.com/u/0/100132233764003563318/posts/7pbJUZCGk8U
In chrome, click on developer tools or use ctr+shift+I
Click on the application menu
Right click on IndexDB
Click Refresh IndexDB
Then you will see your database content.
The accepted answer is 10 years old, mentioning experimental DevTools. So, I decided to rewrite answer.
In Chrome, press F12 or click application menu > More Tools > Developer Tools to open Chrome Developer tools.
Go to Application tab.
On the menu left, expand IndexedDb under Storage section and you will see your IndexedDb content.
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
In Firebug, you can
see JSON formatted as an expandable tree of items
and also explore them using Firebug's Dom tab.
The view is available within Net panel and visible as
soon as a JSON request is expanded.
As in this screenshot:
I'm trying to switch to Chrome but can't find this feature in Dev Tools.
Does Chrome's Dev Tools provide something similar (assuming you're not using any additional extensions like Firebug Lite)?
You can use:
inspect(myObject);
in the Chrome console to get an inline object inspector similar to what the DOM tab in Firebug gives you. In your case you can to do this on whatever object you assign your JSON results to.
As far as I know Chrome does not have this feature.
In case you didn't know, Firebug Lite for Chrome supports this feature (only for XHR requests), so you can use both Chrome Dev Tools and Firebug Lite to inspect JSON responses. See this blog post:
http://blog.getfirebug.com/2010/09/09/firebug-lite-1-3-1/
Disclaimer: I work with the Firebug Working Group
Chrome 12 (12.0.742.6) will have this feature!
You can already download the beta of 12 today.
https://bugs.webkit.org/show_bug.cgi?id=20628#c4