I am building a chrome extension that is listening to messages coming from Chrome Dev Tools.
We are building a CI system and want to automate the following process:
Open DevTools and go to Elements pane.
Select node (see attached image - chrome1.png)
Select the Accessibility pane (see attached image - chrome2.png)
Are the above interactions possible using Puppeteer? My other option is to use Sikuli (http://www.sikuli.org/), although Puppeteer seems to be the right way to do things
-anurag
Doesn't appear to work. Here's my attempt:
https://glitch.com/edit/#!/puppeteer-open-console?path=server.js:25:3
Update
This prototype is just a test to see if you can open DevTools by triggering one of its keyboard shortcuts: Control+Shift+J. This doesn't appear to work.
However, one of the Puppeteer owners just told me that you can pass the devtools:true argument to puppeteer.launch() and that will enable you to open DevTools. Haven't tried it myself. He's not sure whether you can automate DevTools actions via Puppeteer. You might be able to get a reference to the DevTools window via browser.targets().
Related
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.
I am using Visual Studio Code in Mac to do web programming.
I see we could use shift+cmd+v to launch a preview and cmd+k v to launch a preview in a separate window.
But once we modify code and save it, does anyone know how to reload and update the preview (by shortcut by preference)? Additionally, is it possible to automate the updates?
Moreover, I have opened the Debug panel, once I click on the green button, it lets me Select Environment:
Does anyone know which one I should choose to debug client side HTML+JavaScript programs?
1.) The "Preview" you mention is for Markdown files. Its not supposed to render a proper HTML preview, that's why it doesn't work or refresh. As soon as you use it with Markdown files, it updates / refreshes as you type.
But there are a couple of HTML preview extensions in the marketplace, just search for "HTML Preview" and you should be able to find some.
2.) None of those options in your screenshot, VSCode does not ship with a client side debugger by default.
But you can install Debugger for Chrome which uses Chromes debugging protocol. Detailed instructions on how to use it are in the extensions README.
I need to inspect the website but my scripts are not listed.
I already tried to uninstalled chrome and resintalled it again.
If I pause javascript and trigger any javascript action it opens a VM-version of jquery but I need the real file, not the vm-loaded one.
Any idea?
A but or not?
Any workaround?
Following the discussion from the comments above, the issue was unrelated to the web app but the environment in which the Chrome instance was run in. It was likely a Chrome Extension or modified setting that caused this misbehaviour.
The resolution was to create a new Chrome Profile, since extensions and settings are not shared between profile instances. The next step may be to identify the particular extension or plugin at fault to avoid this happening again.
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.
I'm new to Eclipse. I may need a better understanding or a plugin that would provide me with features described below. While doing some Android development, and I while making changes to my code at one point Eclipse warned me that this emulator doesn't support hot-swapping and if I want to disconnect. I'm used to see status in either the toolbar or in some log from Visual Studio. Is there a way to see this feedback in Eclipse?
My problem is that there are quite much implicit stuff in eclipse I would like get feedback of and control, like whether I'm
connected or not to a device,
if I'm attached to a process on it or not with debugger,
some kind of build log with a timestamp so I know it happened,
the automatic uninstalling and installing of the project on the device
which project is "active" ("featured") in "Run" and "Debug" buttons/configurations
Is there a plugin that can give me explicit commands over these automatic features? Like a toolbar or command. What I would expect of this tool:
be able to indicate the current status (eg. currently connected or not)
gives me control to eg. connect
gives me control to eg. disconnect
Preferably on a toolbar, as I know some of these are available as menu commands.
Furthermore I tried to configure my toolbar by Window menu -> Customize perspective..., but pin-pointing the features I want made my Eclipse put empty space up for the buttons I disabled, and next time I got to the same config screen it got the checkboxes wrong and displayed some stuff active what was actually disabled.