How to send Chromium debugger a command (set breakpoint)? - google-chrome-devtools

I'm using an advanced text editor (but not a totally IDE) while developing web based applications, so I do rely on Chromium's debugger.
I want to provide an easier way to put a temporary breakpoints in the runtime via text editor's window.
All I need is to be able to send a breakpoint information in the runtime to the Chromium Debugger. Is there a way to achieve this?

You will either need to connect your text editor to the Chrome Developer Tools or write some small(ish) programs that connect to the Chrome Developer Tools and issue the appropriate setBreakpoint command.
Setting the breakpoint is basically just sending some JSON to the Chrome Developer Tools, but for that to work, you need to first ask Chrome for a Websocket connection, connect to that Websocket and then issue your command. There are various ways of automating the Chrome Developer Tools for Pyhon, NodeJS, C# and Perl (written by me), so if you can tell us what language you are comfortable in, we can likely suggest concrete libraries to do the communication with Chrome / Chromium for you.
See also
https://chromedevtools.github.io/devtools-protocol/tot/Debugger#method-setBreakpoint

Related

How to set the default filter of network in Chrome Developer Tools?

When debug a web site, the Network pane of Chrome Developer Tools contains networks of Chrome extensions, I want to filter the networks of extensions, but I must input -scheme:chrome-extension everytime. Is there a way to configure the Network filter chrome-extension default?
Unfortunately it doesn't looks there is any other way. I did a little investigating to see if I was able to create a Chrome Extension to automate this, but the chrome.devtools.panels API doesn't provide access to the Network panel, only the Elements and Sources panels, and even those only have access in a limited way.
Your best bet currently is to run Chrome in another Profile or in Incognito mode.

Debugging a Thunderbird extension

I'm working on a Thunderbird extension, and, unfortunately, can't sort out what's still valid from what's not. There's lots of stuff online, but, most of it is no longer applicable to recent Thunderbird.
At a minimum, I need a way of seeing log messages from the extension, so I can see what's working and what's not. Ideally, I'd like a full debug console. There is a reference on Stackoverflow to Thunderbird Developer Tools, but there doesn't seem to be a way to download them.
I'd also like to be able to execute Javascript that can reference my extension via the console. When I try this via Thunderbird's console, I get error messages. I get this even when using other people's extensions, so I have to assume that extensions are outside the scope of the console
How can I get visibility and interaction to a new Thunderbird extension?
2020 Update:
If you are writing a MailExtension (this is how WebExtension are called for Thunderbird) you should have a look at general debugging in WebExtensions, e.g. https://extensionworkshop.com/documentation/develop/debugging/
You should probably also take a look at the general developer documentation on MailExtension at https://developer.thunderbird.net/add-ons/about-add-ons
The thinks listed below there written for the Legacy Overlay Extension, which do not work in newer Thunderbird versions.
logging messages
As described in https://developer.mozilla.org/en-US/docs/Debugging_JavaScript, there exist 3 different consoles in Gecko. The one best accessible in Thunderbird is the Error Console. You can write messages to it through the nsIConsoleService. If you don't mind that the log messages show up as an error, you can also simply use Components.utils.reportError().
Another way is to log to the (native) console from which Thunderbird is started. This is done through dump().
The newest way to log messages is using the Log.jsm module. It is a very nice wrapper around the different logging methods, and my preferred way to log messages in Thunderbird.
Thunderbird Developer Tools
As you haven't linked to the reference, I'm not 100% sure, but I think you mean the possibility to remotely debug Thunderbird through Firefox. You don't need to download anything to use this, it is already integrated in Thunderbird.
execute Javascript that can reference my extension
Debugging Thunderbird remotely through Firefox gives also access to the console and Scratchpad in the Developer Tools. Both should have also access to the add-on.
You may also want to look at the Tiny JavaScript Debugger. It also allows the execution of arbitrary code while debugging.

How can I re-use the same Chrome Developer Tools Window for every tab/window?

I am very used to Mozilla Firefox - Firebug. When I use Firebug it isn't linked with a particular window, it changes when you switch window or tab so the Firebug instance always show the active window, html, css, javascript etc...
As I am e Web Developer I need to test a lot in different browsers. In Google Chrome the Developer Tools seems to have linked to it's own tab/window. Sometimes this is very helpfull because it allows you to compare 2 different html-trees or css in multiple Developer Tools windows. However can I re-use the Chrome Developer Tools like it will behave as Firebug does. With just 1 instance which automatically switch between source when I switch tabs or windows? I have searched for some option but could find it in somewhere. Is this even possible with Chrome Developer Tools?
I'm using OSX Yosemite and currently Google Chrome Version 43.0.2357.130 (64-bit).
Any help would be much appreciated! Thanks.
This is not supported. The best thing to do would be to file a feature request in the issue tracker. I doubt this kind of functionality would be implemented.
What DevTools does is store the settings locally, so the same settings persist between all opens. Each tab you wish to debug you need to explicitly open the DevTools for; these will all share the same settings and as they are changed in one instance it will populate to the others. This keeps the context from switching on-the-fly by just changing tabs and then losing your place.

Get the real-time web design preview from the browser

Assume that I have two monitors assigned to my pc. Now I want to get the preview of a web site while coding it. Is there anyway to do this?
eg:- Do the coding from sublime text from a one monitor and the meantime watch the output from the Firefox web browser.
I have used live.js for this more than once. It can work either as a bookmarklet or embedded on your page, and it works in any browser as it's not an extension. Also requires no other software to work.
The downside is it that it will flood your developer tools with HEAD requests every second or so to determine when to reload things. That's the cost of not having to install external software.
You can use the LiveReload plugin for SublimeText. It listens for changes to your code files and updates them in the browser in real time.
Also, do not forget to add the respective browser extension. That should save you from adding any scripts into your page.
You could use yeoman ( with Grunt or Gulp depends on which generator you want to use ).

How to remove codes generated by plugins from Chrome browser developers tool?

I'm using Google Chrome Developers tool and console while developing and debugging my web applications.
I've some Chrome plugins/extensions installed. These plugins/extensions add extra markups and scripts in the pages while rendering them in the browser, and when I view my codes in the developers tool, makes it a lot messy.
I want a clean way to view my codes without those extra markups.
So is there a way to toggle (disable/enable) the plugins quickly, or in the best way, to disable them in a particular tab? I've several plugins/extensions installed and I don't think it's a good idea to disable and then re-enable them manually.
Besides, I may want to use a plugin/extension while I'm browsing other websites on other tabs simultaneously.
There's no mechanism to disable an extension for a specific tab, or specific host. You could hack something together via the management API that would disable extensions when you hit a specific URL, but that disabled state would be global, not local.
Extensions don't, however, run in Incognito mode (unless you explicitly whitelist them via a checkbox at chrome://extensions): that might be a decent workaround for you. Load your in-development site in Incognito, work with it there in a clean environment, and pop back into your regular window for normal browsing.
You could, of course, accomplish the same thing by setting up a specific profile for development in which you simply didn't install extensions.
These are workarounds, of course. You should feel free to file a feature request for more granular user-side control over when extensions are loaded: http://new.crbug.com/
Would running 2 separate instances of Chrome be of help for you?
(You can start 2 unrelated Chrome browser instances from a command line specifying different user directories: chrome --user-data-dir=userdata1 & chrome --user-data-dir=userdata2 )
I haven't tried it for your usecase, but it sounds reasonable.