Is Chrome Dev Tools available only through Chrome extensions? Or is there a way we can use it, for instance, as a library from a JS standalone file?
Update
Chrome DevTools Frontend is now an NPM package that you can take advantage of. It is based from the new DevTools sub-repo in Blink. So you can easily pull in the DevTools assets and keep then up-dated without much work.
Original post
It depends on what you want exactly. You can dig in and rip out bits of the frontend to use. Like Betwixt by Konrad pulls the network panel design out and plugs it up to an OS interceptor. So you can use the network panel you know and love to debug any app on your desktop.
Now, can you easily do this kind of stuff. Even keeping it auto-updated? No, not really. It is fairly complicated and you need to be able to handle ripping the stuff out yourself. That being said, if you want a challenge then the code is open to everyone.
I'd say that the first sentence on the About website is pretty clear:
... built into Google Chrome.
So officially, by Google, it's only for Chrome. It's part of Chrome, not a standalone library. Issues linked to DevTools are part of Chromium, where people can contribute.
Related
VSCode has a very customizable UI with Activity Bar, Sidebar, Tabs, Status Bar etc (https://code.visualstudio.com/docs/getstarted/userinterface); customizable via extensions and seems to have been developed without any of the common web frameworks (https://github.com/microsoft/vscode/issues/99845).
It is well maintained, works in different OSes and has automatic updates.
Even if we remove the code-editor part, there is a lot of work in that.
This makes me wonder if it is possible to write a totally different app (not a code editor) on top of VSCode. For example a Slack-like messaging app, an Obsidian-like knowledge base app, etc.
Is it possible? Are there apps built on top of this code? Have I missed an important point that makes this idea unviable?
EDIT:
Some have pointed a very valid point. Some of what I mentioned here as VSCode features are really Electron features that VSCode inherits. Having developed an Electron app (5yrs ago) I see many things in VSCode that are not in Electron (but maybe my concept of Electron is wrong).
I want to emphasize that VSCode UI (bars, tabs, etc) + its extensibility seems to be a valid development framework. And I am ignorant of anything in this sense.
EDIT (jan/2023):
I guess we can add StackBlitz as a product that just did that.
I think your question is very valid and I was wondering the same thing, so thanks for asking it.
One thing that VS Code gives you that Electron doesn't is a distribution model - the marketplace and how new versions of your app can be detected and downloaded automatically etc. This is a big deal.
I think the disadvantages are that a very fancy UX may not be possible directly - but you have to "work around" by putting HTML within a Web View perhaps. This is just my guess and I haven't directly tried it.
To answer your question - the only one I am aware of is Thunder Client - so think of Postman - but as a VS Code plugin.
See also https://stackoverflow.com/a/67069697/314780 , which points to Eclipse Theia which uses parts from Visual Studio Code (i.e "Code - OSS") - https://theia-ide.org/ . The site links to a number of IDE-style apps built on top of it.
VS Code is an electron app. You might want to research what electron is – because you mention it: The Slack app is built on that same framework.
So, you've just invented something that already is done, very widely, in practice.
I have found that there are plenty of frameworks for browser plugins.
my first question:
which one of the following frameworks specified for plugins and which one is not specified for plugins:
FireBreath, OpenForge, Kango, BabelExt, Nixysa project, JUCE project, QtBrowserPlugin project .
my second question:
Is there another popular plugin's framework other than those mentioned?
my third question:
What is the main differences of these popular plugin's frameworks?
Indeed is there any comparison of these frameworks, the comparison could be in each of following terms:
usability (for a page as a NPAPI plug-in or for a browser as an
add-on extension),
simplicity (in developing),
speed (on execution),
extensibility (of developed add-on),
availability (in Windows 86x and 64x, Unix, Linux, mac and other
platforms and also mobile platforms specifically android, ios, ...),
flexibility (for new technologies),
reliability (in terms of security),
accessibility (open source or not),
portability (in Fire-fox, chrome, IE, Safari, Opera, ...),
applicability (in drawing, communicating, calling from external
server, threading, network accessing, etcetera),
stability (in changing the policies, for example in deprecating
NPAPI)
Also I have read Cross-Browser Extensions API? which I think it is about extension's framework (not plugin's framework)
I'll be honest -- this seems like something you should be able to answer with some google searching. I appreciate that you're at least trying to apply suggestions on how to better ask questions, though, so I'll respond on the few that I know something about.
FireBreath is a C++ framework for creating browser plugins, not extensions. It works as an NPAPI plugin for browsers supporting NPAPI plugins (previously this was all but IE, but Chrome dropped support for them this year and Firefox plans to at the end of 2016) or as an ActiveX control, giving it equivalent functionality to a browser plugin in Internet Explorer. FireBreath 2, which is working but poorly documented so far, changes the APIs from being synchronous between the browser and plugin to being asynchronous and adds an emulation layer to let them work with Google Chrome using Native Messaging. It's the most complete and up to date of the plugin frameworks, as far as I am aware. I am its primary author, so feel free to get your own confirmation of that.
Nixysa is a tool that takes definition files and outputs code for a NPAPI plugin. I haven't used it, so I can't tell you exactly what it's capabilities are. It hasn't been updated since 2012, when PPAPI support was added; this is unlikely to be useful, though, since PPAPI has changed significantly since then, and also since the only PPAPI plugins that can run without special command-line flags to chrome are ones specially blessed by the Chrome team.
JUCE is a GPL library with a commercial licence available which has some support for creating browser plugins. I have no idea as to how powerful it is these days; it seemed well written when I last looked at it, and takes a much more minimalistic approach than FireBreath does; FireBreath gives you a framework and tries to make everything Just Work, whereas JUCE seems (I could be wrong) to be more of a "provide the building blocks, but don't try to make everything look the same" type of thing.
QtBrowserPlugin is a defunct unmaintained project which at one time allowed creating browser plugins (probably just npapi, but not certain) with QT. Indications are that it probably doesn't work anymore.
I have no idea what the other projects are. If I were you, I'd try doing some research. Google is your friend.
I've to create plugin or add-on for my official community site.
Requirement
There should be a button at browser, which should extend a form, which can add the current url as a bookmark with interaction from user with some more inputs, in turn that should be recorded into excel sheet in local drive. I've VBA code to extract data from the community url to excel sheet. Now, I've to create browser control to enable user direct url to fetch the data.
My control should be activated (i.e. toolbar button) based on url, so what should i create, a plugin or add-on ? i want my control not to affect browser performance or user experience.
Based on reply for 2, what tool should i use to create plugin/add-on which should be compatible across browsers ?
I've gone thro' Fire-breath demo, code capability with Visual studio, which was nice, but still missing some knowledge about visual studio, what to package of visual studio install and what language to use, it would be better if it is Visual basic ?
At last, is it possible to place control (i.e. button) inside the webpage to activate my code, if so, which one is capable of doing it, add-on or plugin ? workflow in nutshell to achieve that...
Thanks a lot
First, a few things to understand:
A browser plugin is something that is instantiated in one of two ways:
Injected into the DOM in an object or embed tag
Instantiated by the browser to open a page with a specific mimetype
Browser plugins don't know anything about the browser, the URL bar, the bookmarks, the context menus, browser dialogs, browser chrome, browser events, etc. Browser plugins only know anything about the current page. Browser plugins cannot change browser settings
Browser plugins are DLLs; they can't easily be written in Visual Basic. While it might be possible, I've never seen one, and you'd have to learn a lot about NPAPI plugins before you could do that. You'd also probably have to write one for IE, one for IE, etc.
In other words, what you need is not a plugin. Firebreath is not going to help you much, if at all. Some extensions (also called add-ons) use a npapi plugin to provide functionality that they cannot do on their own. For more information see http://npapi.com/extensions
With that information, I recommend you think about it and create a new, more specific question for what you need to know next. I don't know extensions, I do plugins. Actually, once you break down what you need to do into some smaller questions you'll probably find others who have ask most of them and you can find the answers with simple searches. Your main problem is that you don't yet understand the technologies you need to use. Hopefully this has helped.
I wonder if there is a way to perform a step-by-step debugging of the compiled GWT code, in order to determine how some events are being fired.
The interest I have on this is that I'm using SmartGWT, and for some reason the click events on their components propagate to pop up windows that occupy the same position. However this only happens in Mobile Safari.
Even more interesting it only happens with smartGWT version of onClick and not with the plain GWT onClick.
Mostly a hack for now, but I suppose it'll work (you'll have to recompile your app though):
First, compile a recent GWT from trunk: https://developers.google.com/web-toolkit/makinggwtbetter#workingoncode
Then recompile your app with source maps enabled: http://code.google.com/p/google-web-toolkit/wiki/SourceMaps
Follow the steps in the comments of this wiki page to be able to use SourceMaps in Chrome, then re-deploy your app
Get Chrome on the Dev channel: http://www.chromium.org/getting-involved/dev-channel
Use http://www.iwebinspector.com/ to start Mobile Safari with remote debugging and then connect to it from your Chrome desktop: http://www.webkit.org/blog/1620/webkit-remote-debugging/
Finally, enable source maps in Chrome so you'll see your Java code in the Web Inspector!
See http://www.youtube.com/watch?v=-xJl22Kvgjg for a preview of the future of debugging with GWT, that will allow this kind of things in a much less hackish way in the near future.
I don't know if there is a nice way to debug compiled javascript GWT code, but why do you need it?
For described purpose it's better to use GWT development mode with debugging options. You can add the following parametres e-Xdebug -Xrunjdwp:transport=dt_socket,address={PORT},server=y,suspend=n to the development mode running command, it will give an opportunity to add breakpoints to the cliend side GWT/SmardGWT source code. Then for debugging you should connect to port specified in parametres from your java IDE.
Debugging GWT https://developers.google.com/web-toolkit/doc/latest/DevGuideCompilingAndDebugging
I need to write a web browser plugin that supports IE 7+, Firefox 3+, Chrome.
This plugin has to be able to place a DirectX object in a web page.
I have no experience with plugins.
I did some investigating and decided to do it with FireBreath.
I couldn't understand the way to place an image inside the plugin area. Can someone provide example?
How do I place a DirectX object there? Any example?
How do I trigger automatic installation?
Thanks!
Sara
Well, there are two problems you have to solve. Understanding of plugins is really the easier one at this point, since have FireBreath to help you. Gosh, whoever wrote that must have been brilliant! (okay, it was me, so I had to say it)
The first thing to understand is that you don't "place" a "DirectX object" anywhere. You don't "place" an image inside the plugin. Rather, you draw the image to a window just like in any other windows application.
You may want to pull up my answer to another similar question: Directx control in browser plugin
In a normal plugin instance on windows (a "windowed" plugin) you will be given an HWND that you can draw to. You need to set up a DirectX context in that window and draw to it -- either at framerate that your application needs or just when a RefreshEvent comes. If you follow the link about you'll see a link to a post on colonelpanic.net on drawing in windows; that should help you understand better how you get the HWND.
Images are basically the same deal; if you have image data, you can draw it to the HWND using normal windows drawing APIs.
Finally, if you need additional help I highly recommend you pop into the FireBreath IRC chat room. I'm usually around during daylight hours (GMT-0600) on weekdays and there are others who can sometimes help as well.
As of 2021 there is way to make plugins that will work in Chrome, Firefox, Safari, see Web Extension (browser plugin) for Chrome, Firefox, Safari standard reference and tools (2021)