Why does a new Developer Tools window open for each Chrome App window? - google-chrome-devtools

Following on from this question: How to communicate between multiple windows of the same chrome app? and answer, is this why when you are developing an app that you have loaded via 'load unpacked extension' and open a new window using chrome.app.window.create() and then right-click on the new window to 'Inspect Element' you get a new developer tools window and not the one already open for the original window of the chrome app? Or is it a bug?
I ask because its very time-consuming having to switch between the different developer tools windows when I'm actually using Dev Tools (with Workspaces) as the actual IDE for writing my Chrome app (I am not using any other external text editor or IDE)

This is a limitation of dev tools in Chrome. What is being suggested would be pretty cool, but it would need some work that we haven't done.
Just to be clear, different windows do not share the same JS "global context". The quotes are there because the "global context" is a thing, it has a real meaning.
Imagine there are two windows A and B, and they live in the same JS universe. All the objects in the universe are accessible to both windows, if they can get a reference. There will be two window objects, windowA and windowB.
"Global context" refers to which window object unscoped identifiers are looked for in.
When running code in the "global context" of window A, unscoped identifiers will be looked up in the context of windowA. E.g. "foo" will be looked for on windowA.foo. If foo is actually on windowB it won't be found. Put another way, if you create a global variable while running code in the "global context" of window A, it will actually be put on windowA. If you then run code in the global context of window B, you will need to have a reference to windowA to be able to access it.
I hope that makes sense; it is kind of hard to explain. I've probably got some finer points of it wrong as well.

Related

Need clarification on vs code debug

Can anyone explain these three debug symbols on VSCode I have found on the internet?
My vs code has the one with the play icon.
All demos online on debugging have the one in the middle. How do I get that?
Also, node js debugging is installed but I think it shows as disabled, with no option I can find to enable it.
To answer your question directly [TL;DR]: you already have it if you are using the latest version of vscode. It will take you to the same view as the one on the right
If you look at the codicon libray ref the middle one you pointed out is not present.
Visual Studio Code made changes in February 2020 ref that incorporates running and debugging to be something more harmonious:
User studies revealed that new users have difficulties finding how to run their programs in VS Code. One reason is that the existing "Debugging" functionality is not something that they relate to "Running" a program. For that reason, we are making "Run" more prominent in the UI.
The main menu Debug has become the Run menu.
The Run and Debug view has become the Run view and the corresponding Activity Bar icon now shows a large "Play" icon with a small "bug" decoration.
So in other words, there is no difference. The 'Run' and 'Debug' view is synonymous and the icon reflects those changes. As they noted, the Debug view is now called the 'Run' view, but it still offers debugging and breakpoints.
There are 2 possibilities you are running into however:
The tutorials and guides you are using are out-dated (showing an outdated version of vscode)
The tutorial or guide is using an extension that offers debugging capabilities. Extensions have some control over the icon you see
The extension is for single file debugging, according to the June 2020 ref notes, vscode recommends the following:
For debug extensions that want to improve the single file debug experience by adding a "Run" and/or "Debug" button to the editor, we recommend following these guidelines for a consistent look and feel:
Contribute Run and/or Debug commands in the package.json (see Mock Debug):
Use the command titles "Run File"/"Debug File" or "Run Python File"/"Debug Python File".
Use the $(play) icon for Run and $(debug-alt-small) for Debug.
Where their codicon library was updated in June to reflect the following:
As you can see, none of them are prefixed with verbiage like 'run', but they all represent the same functionality.
Additionally, you may see this icon as well:
This represents the panel (view) where the output of your debug will go.

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.

How to create an Explorer window without Navigation Pane using Shell command Explore

My app Folders Popup is using the command ComObjCreate("Shell.Application").Explore(strPath) to create a new Explorer window. I need a way to tell this new instance of Explorer to comply with the Navigation Pane setting decided by the user (to show or not show the pane) in previous Explorer windows.
Actually, this setting is not taken into account by default in the new instance created by the Shell command and users of my app who prefer to use Explorer without this navigation pane are annoyed to see it reappear when my app is opening a new Explorer. Is there any solution to this (except sending keys to the Explorer, what I prefer to avoid)?
Simpler is sometimes better ;)
The Run command isn't just for executables, it can also open non-executable files like images/documents (as long as their file type is associated) and especially folders:
myFolderPath = C:\Path\To\Folder
Run, %myFolderPath%
Generally, it makes sense to use built-in commands or functions if available, before incorporating ActiveX, COM objects or DLL calls; those should provide extra functionality, and not replace what AHK can do out of the box. That, of course, occasionally requires some digging into the docs, but it's worth it! AHK is one of the most well-documented automation scripting languages for Windows.

Chrome console + text editor

I find myself typing JavaScript in the console a lot. For example, I quickly want to see the result if I change the property of a certain object. However every time that I refresh the page I have to redefine my variables, etc. I do this by using the up-key, so I do not have to retype, but this costs a lot of time. What is a better way?
The ultimate coolness would be an environment like Sublime Text in which you can write multi line code and from there execute it directly in the browser... And then still have the autocomplete list of all the methods of an object (like in the console). Obviously this is not available, but I am very interesting in the workflow of other when typing JavaScript code in the console.
In Chrome 24's Sources panel, use the Snippets tab. Right-click in the left (blank) tree and choose New from the context menu.

Can I script FlexBuilder without writing an extension?

I'd like to script FlexBuilder so that I can run debug or profile without having to switch to FlexBuilder and manually clicking the button (or using the key combo). Is this possible without writing an extension?
To be more specific, this is exactly what I want to do: I want to create a TextMate command that talks to FlexBuilder and makes it run the debug target for the currently selected project. TextMate already has support for interacting with Xcode in this way, and it would be great to be able to do the same with FlexBuilder.
When compiling I use Ant and have full control over that from TextMate, what I want is to be able to launch the debugger and the profiler. The command line debugger is unusable and there is no other profiler available than the one in FlexBuilder.
Since FlexBuilder essentially is an extended version of Eclipse, any tools/scripts for doing the same in Eclipse should work for FlexBuilder aswell. I couldn't find any tools like this googling it, have you considered doing away with FlexBuilder completely, there are plenty of guides for using the mxmlc (or fcsh) compilers directly from your editor.
I do not know if there is a plugin like this for Eclipse however if not you can write one as it should be easy.
If the specific command that you want to call shows up in Windows/Preferences - General/Keys, you can create a plugin that takes commands from TextMate (I do not know what protocol TextMate uses, socket or something else) and executed the specific action that is associated with the command that also appears in preferences.