I was wondering whether it is possible to make the Google Chrome DevTools Console go fullscreen using JavaScript?
The Google Chrome console doesn't include any Javascript API's for making the window full screen (or for modifying window dimensions at all). Unfortunately, this means it is not currently possible to natively alter the size of the console (or make it go full screen) programatically.
https://developers.google.com/web/tools/chrome-devtools/console/console-reference
That said, Chrome dev tools is built to be extensible and anything is possible. If you wish to create your own Chrome plugin to interact with the console window and make it full screen programatically, you very likely can.
The obvious downside to this method is that you'd have to ask a user to install your custom plugin in order to use this functionality. That may not pose a problem depending on your use-case, but it's something to be aware of.
https://developer.chrome.com/devtools/docs/integrating
Related
Edited answer:
In most browsers, there is a function called "Inspect" or "Inspect element" that opens up the developer tools. This allows you to use many different tools, like changing the DOM, running JavaScript, finding the sources of linked files, change the CSS and other things. This tool set can be used to mess around, but also for other purposes, like cheating on online tests. That is the reason that many schools have blocked this functionality from the students. Being a avid learner and programmer, I decided that I would use other methods. I am wondering whether or not I could use JavaScript to open the Developer tools panel, even though I am guessing that JavaScript can't react with the browser, only the page. If there is a JavaScript alternate for the developer tools menu, please tell me about it. Thank you for your time, I really hope that I get question asking back. For anyone wondering, I am only really able to interact with a page through bookmarklets.
here you go
javascript:(function()%7B(function() %7Bvar x %3D document.createElement("script")%3Bx.src %3D "https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSnowLord7%2Fdevconsole%40master%2Fmain.js"%3Bx.onload %3D alert("Loaded Developer Console!")%3Bdocument.head.appendChild(x)%3B%7D)()%7D)()
paste into url section of bookmark and name it what you want.
If it's a custom build Chrome version and they disable or even remove the tool, then there is nothing you can do.
Chrome interface is not under control of Javascript, which is only for render. You can access (if is enabled) using hotkeys (Ctrl+Shift+J or I), F12, right click elements or access via the interface.
Try creating a bookmark and calling it 'Inspect Element'. Then assign this code to the URL part of creating the bookmark:
javascript:void(myDiv=document.createElement('div'));void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));
so currently I have a packaged Chrome app, which uses chrome.app.window.create() to create frameless Notifications. Since Chrome Apps will be discontinued in the near future I am currently looking for alternatives.
I am trying now to emulate the same behavior in a Chrome Extension, but I have only found chrome.windows.create() where I can open popups, but they can't be made frameless apparently.
I have also tried chrome.notifications but they are not customizable enough for my needs.
Do any of you guys know a way to do this?
No, that's about it. You can't emulate this behavior with extensions.
Add to that list a possibility to inject DOM in the currently opened page, which you can style, but it's complicated, requires very heavy permissions to do at will at any page, will be confined to the browser viewport and still won't work in some edge cases.
I'm trying to debug a CMS-backed website (Drupal 7). It is displaying some problems due to conflicting Javascript. For a fraction of a second, the site components are fine, and then *SNAP*, they're broken. It must brake as soon as the conflicting resource loads.
Using Chrome's developer tools (or Safari, Firefox... even IE's), is there a way to load the page, one Javascript resource at a time? This way I can see exactly which resource loads when the page issues appear.
(I'm also open to better ways of debugging this kind of thing.)
You can use the Pause on exceptions feature of DevTools, in Sources Tab, it is the hexagonal pause button at the far right.
If I'm doing Facebook application development I often find myself wanting run JavaScript in the iframe where my page is embedded, which is fairly cumbersome. It would also be nice (though my main priority is just being to on the fly run some javascript) if there was a way to run something similar to the chrome dev tools or firebug specifically on that one frame.
Do I have any options for debugging in a single frame?
In Firebug it's possible by using the cd() function. E.g.: cd(window.parent.frames[1])
I ended up embedding Firebug lite inside of the iframe for superusers, which I think I should be doing in the first place so our designer can get some feedback on the iPad and things.
I also noticed that there is a dropdown (or I guess drop-up in this case) menu in the chrome-dev channel for specifying which frame you are working in, similar to the cd() command styrr mentioned.
Learning client side code of an existing site, would like to understand some activity that takes place totally at the client side.
Want to know what JS handlers are being called when I click on a specific element. Is there a way to see this information in some kind of debugger?
I'm using Firefox with Firebug, or Chrome
You can use the Chrome Developer tools to do what you are looking for if I'm reading your question correctly (apologies if I did not). In Chrome, right-click on the element in the rendered page and choose "Inspect Element". On the right side of the tool window that opens there's a section called "Properties" that will pop down a list when clicked on. Investigating the sub-categories should show you what functions are hooked up to what events. You can then use the "Scripts" area (tab at the top of the Development Tools window) to set breakpoints and observe the behavior in script files. Hope that helps.
Most sites will use some sort of Javascript framework which uses their own event management system, rendering firebug's or chrome dev tool's DOM inspection tools rather useless.
Luckily it isn't too difficult to tap into the event systems of these frameworks. There's FireQuery, which is an extension for Firebug that integrates very nicely with Firebug's DOM inspector, but it works only for jQuery. For other frameworks, there's also Visual Event