I recently saw this:
if you open Spotify on chrome (not sure other browsers) and you click this button. It opens a popup. But it is different, it is a whole new Window, without any OS button. It also doesn't block this popup. How that work? I tried to find this in javascript code, but I didn't find it.
It is something new for me.
I see now they are using Picture-in-picture:
https://wicg.github.io/picture-in-picture/#example-add-custom-pip-button
Related
Im facing a problem with google chrome devtools....
I used to hover on a variables and it would pop up a tooltip telling me the value and other info, also on a function it would pop a link to click and it will take me to the definition location of that function, but all that is gone now and not working anymore...
Now i just see my cursor blinking when i hover over the variables... and im coding using VS Code i dont know if that might also be a problem, but i think i got this problem from a recent chrome update.
I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks
Another way is to put this in your javascript file
debugger;
and leave the console open, which will force the debugger to not only stop there but to also open the file.
You have two main options to drill down to the source file that you created.
1. Use the pop-up window mode of the preview panel
By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.
2. Right click the preview and hit inspect element
Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.
The picture is worth thousand words...
F12 and then select sources; plunkerPreviewTarget has the source code
A quicker way I found is to simply grab the unique id of your plnk.
In normal 'edit' mode URL will be something like
http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview
Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL
http://run.plnkr.co/plunks/ therefore becoming
http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/
Important: Make double sure you add the trailing /
Open new URL in a new chrome window
Hit F12 in chrome, voila native angular JS debugging for your plnk
Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.
This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:
Open developer tools (F12)
Open sources
Look for run.plnkr.co
Expand this to show a single directory with a cryptic name
Inside, you will find your files so you can start debugging
First introduction to chrome apps. I'm trying to get some sort of workflow down. I've enabled the checkbox to collect errors, but can not seem to clear them between executions of the app. I assumed closing the app them re launching it would do the trick. The only thing that works right now is deleting the app then reloading the package.
To clear the list of errors at "Collect errors":
Toggle the "Developer mode" checkbox (disable, then re-enable).
Click on the Reload link (reload extension/app).
Refreshing the page instead of reloading the app/extension also works.
Using the 39.0.2171.95 64-bit Chromium all I need to do is toggle the Developer mode
I think the solution suggested by Rob does not work anymore for recent versions of Chrome.
You clear the errors by following the steps below.
Go to chrome://extensions
If it's not enabled, enable the Developer mode, see below.
Click on the Errors button (in red in the picture below) on the extension.
Now you can either delete each single error by clicking on the trashbin icon next to it, or you can just clear all errors by clicking on the Clear all button depicted below.
I have a problem when using Chrome Developer tools that happens on occasions and prevents me from using it. I have added screenshot showing that when I open the tools, I get a jQuery error that stops me from loading the page, or will load the page but will prevent me from doing anything with the tool.
Please take a look and let me know what I need to disable, delete, anything to stop this problem. Thank you.
Link to screenshot: https://skitch.com/e-pertrai1/eqjfw/semsdesign.me-2012-08-23-how-to-install-make
please press the blue button at the bottom of the devtools window.
It is changing break on exception mode.
In your case it needs to be black.
I know Firebug is the standard, but I find myself using Chrome a lot (screen space, speed, etc.) Anyway, I think their inspector is pretty good, too. Certainly good enough that I don't want to fire up FF and navigate thru a site every time that I want to take a peak at the DOM.
However, probably the most annoying part is that I can't dock the Chrome inspector to the bottom of Chrome. I see that there's a dock button, but it doesn't seem to do anything.
Any tips? suggestions? Is it supposed to do something else? Thanks.
There is now a button on chrome that allows you to dock the element inspector to the main browser window, just like firebug. It is located in the bottom left of the window and looks like a little rectangle with a smaller offset rectangle in it.
Seems to be something they're working on as we speak. So for now, I guess you'll just have to change the window size, to place the inspector underneath it, or whatever your preference is (except docking, of course)...
Ah .. found my answer here. Seems like it is dockable in Safari and not in Chrome, both based on webkit.
Seems like the proposed to solution is to remove the docking button! That's unfortunate. I won't use it if I have to constantly tab back and forth.
http://code.google.com/p/chromium/issues/detail?id=25