When I open the developer tools I get the familiar tools, but they are in their own window.
How can I dock them to the bottom of the window?
It's possible since Vivaldi snapshot 1.10:
https://vivaldi.com/blog/snapshots/docked-developer-tools-vivaldi-browser-snapshot-1-10-829-3/
Docked Developer Tools
We have had a long standing request for the ability to dock Developer Tools. Well, wait no longer, we are introducing this handy feature in our very first 1.10 snapshot. All of you developers who desperately wanted this, can now breathe a sigh of relief. Of course, if you prefer them undocked, that still works too!
It's still not possible however, there are two possibilities.
First, use VivaldiHooks with their devtool.js hook ( this allows you to dock the devtools doing a right-click in the page and selecting [ DevTools at the right / DevTools at the bottom ] )
Or, running vivaldi with a set port for remote debugging such as:
vivaldi --remote-debugging-port=X # X being a port, e.g: 9222
And opening a web panel at:
localhost:X # X being a port, e.g: 9222
I prefer the latter since it's less glitchy, while the first sometimes "eats" part of the window.innerHeight of the window being inspected.
It's not possible at the moment.
You can read more about this issue in Vivaldi's community forum
Related
So I have recently started working on building a Google chrome extension, and found the entire landscape fascinating to say the least. While I was checking to understand how some of these extensions work, I found that many of them have blocked 'inspect element'. I found only 'Adblock Plus' which allows it.
My question:
Are there any more complex interesting chrome extensions that allow inspection?
Any way to find such extensions or how to get around the ones that have blocked viewing?
As a beginner, I would appreciate any advice or tips in this area.
You can inspect and debug all extensions right in the browser.
You may need to use a different method of invoking devtools.
To inspect the popup you can enable developer mode switch in chrome://extensions and then right-click the extension's icon in the toolbar or click ... inside the puzzle piece menu that lists all extensions, then choose Inspect popup.
Similarly, to inspect something shown in the tab, you can open devtools via the standard hotkeys like (F12 or Ctrl-Shift-i in PC) when the cursor is focused on the toolbar even if the page actively intercepts these hotkeys and/or the context menu.
You can also open devtools from the browser menu "More tools".
There's also chrome://inspect.
I am writing a Dev tools extension to add a subpanel to Elements panel.
Extension is called 'Redder' ( see the image)
Is there a way to reach this extension with keyboard.
Right now chrome has a short cut keys to launch Dev tools and switch between main panels but not the sub panels (https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/shortcuts?hl=en#accessing-devtools)
Also, is there a way to assign shortcut key to go to my extension panel directly after launching Devtools?
Good question, but I don't think it's possible.
Even if you made a shortcut listener, there is no API to programmatically switch to your panel.
I am developing a responsive website. For each and every change I made in javascript, css & html file, I need to test it in all possible screen size in portrait and landscape mode. Normally we used to test it in 3 to 5 different browser window size, and in portrait & landscape. I felt changing screensize and orientation again and again is a tedious job. So planned to write a tool, which will open multiple browser windows in a different screen size with the given url loaded in it. Any idea, or advice how to start this?
PS. If you are voting for deleting this question, please consider commenting with some suggestion how I can start, or is there any free tool available for this.
Thanks in advance.
There are number of great tools and services for helping test a website in just about every possible OS/browser/size these days.
BrowserStack.com allows you to pull up your website on nearly every combination of OS/browser/size and use the site to see how elements and features perform. There are other many other services that do this.
Another option would be a browser extension/plugin like Chrome's Window Resizer. It allows you to quickly toggle between common (and custom) window sizes. This is the most manual of the three options here, and the only free option.
One final option is Adobe's Edge Inspect. This app allows you to connect several devices to your computer and simultaneously browse a site across each of the devices. It also allows you to remote inspection on each of the connected devices.
Tools like Selenium can drive browsers and resize them as needed. Depending on the language of your choice, google for something like: selenium resize browser (language of your choice)
Is there a way to disable Chormium's shortcut keys in Linux? I've tried the --app and --kiosk flags but they don't disable the shortcuts, you can still create a new (though unusable) tab with Ctrl+T and can create a new (fully functional) window with Ctrl+N. Also, Chromium appears to do it's own check for Alt+F4 because even though I have it disabled in the window manager it will close Chromium. How do I disable all the shortcuts within Chromium? Window manager is matchbox, started with xorg + nodm (the default lightdm+openbox system didn't allow me to auto-restart the session or get rid of Alt+Tab).
This is for an embedded system using node.js in the background to handle hardware io, but it will need a network connection to function so I want to ensure users are locked out of the browsers (the various Ctrl+Alt+F* shortcuts have already been removed, Chromium is all that remains in making it a real kiosk system). Alt+F4 isn't a major concern (though it would be really nice to get rid of) because when Chromium crashes nodm will automatically restart it and it handles the Alt+F4 somewhat reasonably (black screen, flashing white, then it's back up - it's not a security concern just a severely ugly "feature" people might stumble accross).
I don't think chromium has an inbuilt interface for disabling os keyboard shortcuts like ALT+F4, but what you could do is intercept those key-presses with javascript and that should be enough to stop the key-presses from working.
To enable such a script on all your pages, you'd need something like greasemonkey, which chromium has a support for out of the box, you can read about it here.
Custom Keyboard Shortcuts - Chromium extensions
I have checked many questions and answers regarding how to stop any browser at any time, but I have not found a solution to my problem.
I have a logout button in my application, and when I press it, it adds some classes to an <a> tag. Is there any key/shortcut to stop the Mozilla/Chrome (any browser) to perform the actions or stay the same page?
What I believe you're looking for is a debugger with breakpoints. Breakpoints allow you to mark certain sections of your code as points where you want the execution of that code to temporarily pause its state until a point in which you are ready to proceed to the next breakpoint.
Modern browsers, such as Google Chrome (or any other WebKit browser like Safari) or Mozilla Firefox with the Firebug Firefox extension have this capability.
Chrome (WebKit Browsers):
You can set breakpoints in your JavaScript in the "Scripts" tab of Chrome (and most WebKit browsers):
From Chrome Developer Tools: Script Breakpoints:
Open the Developer Tools by hitting the Control-Shift-I shortcut
Open Scripts panel and select "script.js" from scripts drop-down
Set breakpoint on line 19 by clicking the line gutter (you can use the Control-G shortcut to reveal a line in a large file)
Move your mouse over this page
You should stop on the breakpoint
Hover over the source code to inspect local and global variables, function arguments etc.
Delete the breakpoint by clicking the blue tag breakpoint indicator
Click the Continue button or hit F8 in Developer Tools window to resume
Firefox with Firebug:
There are countless demonstrations of Firebug Breakpoints and other debugger functionality located on this page.
The functionality is very similar to that of the Developer Tools in WebKit browsers.
Internet Explorer:
Internet Explorer also has built in Developer Tools, which among many other features gives users the ability to set breakpoints and stop execution of the scripts. While the Chrome Debugger is sufficient in many cases, there are certain bugs and cross-browser issues that tend to affect Internet Explorer more so than other browsers.
Thus, the Setting Breakpoints section of the "Debugging Script with the Developer Tools" page will be most helpful when attempting to resolve issues that only affect Internet Explorer.