Develop Reference

open Chrome console when DOM ready and set viewport

I am wondering if there is any way I can open Chrome console when the webpage is firstly loaded and set the viewport to a specific device (iPhone X), through a JavaScript code.
I had to do a test where I should only work on iPhone X viewport so I thought was nice if they can already see the console opened with the interested viewport active so they are going to check straight away my work instead of clicking cmd+alt+j and then set toggle device toolbar
Thanks

I don't know this to be true, but I'm guessing that might not be possible because it would infringe on the sandboxing principles that Chrome tabs are based on. You are asking for system level control of the Chrome Browser UI, and there's a lot of effort put into not letting JS code do that because of malicious intent.
You could try using Electron to build an App that does this for you, however that may still have the sandbox boundary concern.
EDIT - You may also look into the Chrome extension architecture. It allows you to implement code outside of the sandbox boundaries. I'm not entirely hopeful that this would work, but it I do know that extensions allow you to control most of interface.

IE Window launched by JavaScript is accidentally in kiosk mode

Summary
I'm developing an internal web application that contains the following link markup:
<a onclick="window.open('/path/to/my/new/page', 'windowname', 'fullscreen,resizable').focus(); return false;" href="/path/to/my/new/page">
Click here to open a fullscreen window.
</a>
The intent is for this to open a new full-screen window, which the user can then resize/close/move etc. However, under certain conditions the link actually opens what appears to be a kiosk-mode window (no titlebar, F11, Esc don't work to exit). To be clear, the page this link is located on is a normal user-started IE 11, Windows 7. We aren't experiencing this issue in Chrome 73, Windows 7, or Edge, Windows 10.
Additional Details
This launch link is working as intended when deployed to a development environment, whose URL looks something like https://mydevenv.local/mywebapp/ (intranet), but not when deployed to our production environment https://apps.ourproductiondomain.com/mywebapp/ (only accessible from our network). It wouldn't surprise me if our organization had site-specific settings for ourproductiondomain, but I have no clue where to start looking for a launch-in-kiosk-mode setting.
Using the IE dev tools, I edited the link and location and determined it seems to specifically launch in kiosk mode when the link is from ourproductiondomain to ourproductiondomain. Editing the link to https://google.com launches Google in regular full-screen mode as intended. Editing my markup into Google also opens my new page in regular full-screen mode as intended (with the link fully qualified to https://apps.ourproductiondomain.com/mywebapp/path/to/my/new/page).
Interestingly, changing the fullscreen to height=600,width=800 has a title bar and allows the user to control the window, but the buggy version has no address/location bar while the functional version does. Not a detail I care too much about, but it might help troubleshooting efforts.
The application is developed in ASP.NET MVC 5 but I don't think that matters since the rendered markup above is exactly the same in both deployments.
Question
Does anybody know what might be going on? If that's too broad a question, here's 2 narrow ones that I think might point me in the right direction:
How do you purposely and consistently launch a kiosk-mode window in IE 11 with JavaScript?
Where can you configure IE 11 with site-specific settings like "Make launched full-screen windows actually kiosk-mode windows"?

This sounds like a bug in IE. For security purposes, user scripts aren't supposed to be allowed to open windows in Kiosk Mode.
It does sound like there are some custom system settings in play here, although I wouldn't know where to find that setting.
A possible fix might be to explicitly specify that you want certain parts of the window frame to be visible:
window.open('/path/to/my/new/page', 'windowname', 'fullscreen,toolbar=yes,location=no,statusbar=yes,menubar=yes,scrollbars=yes,resizable=yes')
Also, I see that your original script uses .focus() directly on the newly created window. I don't think you need it, and feel like that might be what actually causes the bug in IE to be triggered.

Is there a way to control browser size and position across multiple displays / monitors?

Preface
First of all, I am very well aware that webapps should not fiddle with window size or position. Been through a lot of similar SO questions and forum posts.
But this is a special case, where the browser is just a platform to run an app on several specific machines in a controlled environment.
Task
The app should manage windows across several displays. (up to 5)
What I've tried until now
Searched for methods for gaining information about the host system display information, but the window.screen object only reports properties of the display the window is currently on (or considered to be on, if it is halfway on one)
Tried window.moveTo and window.open with flags "left=123,top=123" but they are always limited to the current display
Tried window.resize and window.open with flags "height=123,width=123" but just as with the moveTo they are limited to the current display.
Question
What could I do to make my application use (without manual window positioning) all the available space in a multi display environment?
Scenario
Think of it like I have two projectors correctly aligned, and would like to make it possible for:
each project to project different things (each projector projecting its own browser window)
project an app seamlessly across both projectors (possibly fullscreen)
There could/should be a window running the master window layout logic
Note
I can use any flags, app or kiosk mode, as again: we deploy the app to the target environment.
The browser options are Chrome(preferred), Chromium, and Firefox on a Windows platform (because of the special video card we will be using for 5 displays).
Fallback solution
Manually stretch a window across available displays and run the apps in iframes within this master window.
Drawback: A single process is running everything, so should an app break within a frame it breaks everything.
Afterword
Also a solution to this question would be a great help as well: Windows / Chrome / ATI / Browser fullscreen across multiple monitors

Go with a chrome/firefox extension that has access to window/tabs specific APIs.
Either embed your whole application in the extension or communicate with the extension through messages (chrome, there's an equivalent on firefox).
Support in Chrome is experimental.

You can use window.moveTo(-1000,100) to move a pop up to a second monitor in IE if you check the permission "allow script-initiated windows without size or position constraints" under Internet Options/Security/custom level.
If you only have a single monitor connected, it will move the window to the edge of the primary display. I have not found a way to do it in Chrome though, it doesn't appear to have the same security option.

Try using the chrome.windows API to interact with browser windows. You can use this API to create, modify, and rearrange windows in the browser.
https://developer.chrome.com/extensions/windows
It even works with nightwatch.

Another possible solution is to use the win32 to size & position the window.
As seen in the solution of question: Chrome Packaged App and Dual Monitors (no code there, this is just for reference)

I don't think it's possible.
Browser really limit JavaScript in its permissions for security reasons.
Maybe you can manually(in JavaScript of course) set the x and y position far outside of the screen so it appears on another screen but that's not a neat way to do it.
As far as I can think of, you have two options:
Create different pages for every screen and open them separately every time.
Create all the windows with a button and make the user drag them to the corresponding screen. When the user clicks the button open the window in full screen/kiosk mode and load the content. However I don't know what will happen if you activate another screen while your in fullscreenmode somewhere. It might invalidate and close the fullscreenmode.
This is the only way you can have distinct windows in your browsers as far as I know.

Is it viable to use actual browser windows for detached panels in a web application?

I'm planning an application and I'm wondering if it would be possible to use actual windows (window.open) for pop-out style panels as an alternative to using the "virtual" sort of windows made using absolutely positioned elements. This would have the advantage of being detachable from the browser window so that users could take advantage of the additional screen space provided by multiple monitors.
But I'm unsure how well it would work. Some points:
Would it be possible to keep the opened windows on top of the main application window, so that the detached panels wouldn't disappear behind the application itself
Would it even be possible to open multiple windows from the same application, or would automatic browser security perhaps limit you to one?
What about compatibility with the myriad of browser alternatives?
To summarize, would the advantage of additional screen space outweigh the disadvantages of using browser windows?

Do not use popup windows. They will usually be blocked. It is far easier to give the user a link and ask them (as if giving instructions) to right-click and open-in-new-window, than it is to do a popup and ask the user to manually unblock it. (Even that is bad practice.)
Would it be possible to keep the opened windows on top of the main application window, so that the detached panels wouldn't disappear behind the application itself
Probably not
Probably not.
Would it even be possible to open multiple windows from the same application, or would automatic browser security perhaps limit you to one?
window.open('http://www.google.com', 'win1'), window.open('http://www.google.com', 'win2')
What about compatibility with the myriad of browser alternatives?
Terrible, especially with popup-blockers, though it might work if your users only use one browser.
To summarize, would the advantage of additional screen space outweigh the disadvantages of using browser windows?
I do not think this is a summary of the previous question. Multiple monitors seems to be a useful but rare use-case. I do not know of a website which requires multiple monitors. If you are making some sort of "monitor" (like the security monitor kind) or information-display kind of software, it might be worthwhile, but other websites make do with just 1 window which can be as large or small as the user wants.
That said, it is possible to use popup windows. Gmail for example uses them to create chat windows, which you can later "pop back in". It is not a required feature however, and more than one can quickly get unwieldy.

I would strongly suggest you avoid window.open as many browsers and plugins will stop them. What you need are dialog boxes. See the following links for example of the jQuery UI one.
http://jqueryui.com/demos/dialog/
You can find many other solution online that works without or with other libraries.
You can have as much as you like and can virtually do anything you would do in another window the advantage is that is that it will be much easier to handle communication between the dialog box and the main page that it would be using popup windows.

Removing Firefox Star Icon and Bookmark Icon

I am building an application which has requirements stating that all browser features must be disabled. (It's a test taking application and they are worried about security/cheating.)
I popup a new window so that I can make it fullscreen, disable the menu bar, tool bar etc. However Firefox still has two icons remaining that I can't figure out how to disable. The 'Page' icon and the 'Bookmark' star icon are still on even when I call window.open with location=no. Here is the window.open command:
window.open("filename", "test", "fullscreen=yes,status=no,toolbar=no,location=no,menu=no,directories=no,scrollbars=yes");
Is there anything I can do about this?

From the MDC documentation for window.open():
Mozilla and Firefox users can force new windows to always render the location bar by setting dom.disable_window_open_feature.location to true in about:config or in their user.js file
In Firefox 3, dom.disable_window_open_feature.location now defaults to true, forcing the presence of the Location Bar much like in IE7.
This was done to help thwart phishing exploits. You're better off (your users are better off) leaving it enabled, even if you have control over the machines on which the browser is running.
You should really be designing your application such that knowing or bookmarking the URL won't help would-be cheaters. For instance: don't accept an answer to a question when an answer has been previously submitted.

If you don't have control of the computer the user is taking the test on, there's nothing you can do (and opening a full screen window won't prevent cheating for savvy users, either).
If you do have control over the computer or can instruct the user to install an application, you'd be best suited by building an actual application with embedded WebKit or Gecko.