Two chrome tabs attached to the same console - google-chrome

Is there an easy way to have two different chrome tabs attached to the same console/sources? Something, like a "cloned tab". Sometimes I need to work with two or three different tabs of the same page because I have to test responsiveness, DOM changes, etc, and it would save me a lot of time not having to keep switching from one tab to the other or having to resize them every time.

Related

Page has a weird font glitch on refresh

So I've built a HTML page but I'm getting this weird bug where when I refresh the page, for a split second after refresh I can see the basic font, and afterwards it changes to the one I've applied from Google fonts.
I've checked my code a thousand times and I've no idea what's happening, this is the first time I'm seeing this. It is kinda annoying because it very visible and my elements even change positions a bit, because of the font/size.
Do you have any idea what could be causing this?
a quick search made me find this article: https://medium.com/clio-calliope/making-google-fonts-faster-aadf3c02a36d
you should download your fonts and host them yourself so it renders faster. having google host it for you only makes it slower to load (could be many factors why it takes long to load, maybe its your internet, maybe because there is a lot of text on the page, maybe both.) which causes you to see the regular font for a couple seconds.

Switching between inputs is slow in a large HTML table

I have created a wholesale order form in the form of a large HTML table with lots of number inputs. I've noticed that switching between number inputs and typing values in the inputs are very slow in this table (ie. when I click in an input, it takes time for the cursor to show up; when I type in an input, it takes time for the character to show up). Is there any way for me to remove the lag without paginating the table rows?
You can view and play around with the table here (use guest password "braese").
A screenshot of a Chrome Dev Tools performance recording for clicking inside a single input (I'm not really sure what to make of this):
I did some more digging and testing, and it turns out the lag (update layer tree) when clicking/typing in inputs is only an issue in Chrome. This answer on another question points to issues with Chrome since version 46. It's a shame that such a popular browser has allowed an issue like this to go on for 2+ years. We will have to paginate our order form since Chrome is so popular with our client's customers.
Wow my chrome almost crashed :)
It is your styles
You are causing layer creation every time you apply translate transform
Check out the Layers menu in Chrome Dev tools;
Test if it runs better - only table :)
Also order your styles and scripts! - first styles after that scripts
Cheers!

gallery displaying multiple rows after refresh for a few millisecs but should display only one row

i have this bug on my site, dont know what could I do to change it so it will be displayed correctly.
My problem is the filmstrip on my site kecy.sk a.k.a gallery... when I refresh, there are elements appearing and then dissapearing and work properly... But that first look is ugly... It is supose to be displayed in one row as it is. but when I do refresh the page, I see those pictures in filmstrip stack for a little while in multiple rows and then it goes to normal one row.
P.S. Dont mind that big big pictures... it's gonna be smaller sizes...
Thank you
You are serving scaled images thus your website speed is very slow
Dont scale image using HTML or CSS. Try to create a php function for resize them.
You have to specify cache validator.
The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 9 request(s) and 1.7KiB.
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i44!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=48356
https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i7!2i69!3i43!4i256!2m3!1e0!2sm!3i373056598!3m14!2sen-US!3sUS!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!12m4!1e26!2m2!1sstyles!2zcy50OjZ8cy5lOmd8cC52Om9mZixzLnQ6NXxwLnY6b2ZmLHMudDozfHAudjpvZmYscy50OjF8cC52Om9mZixzLnQ6MnxwLnY6b2ZmLHMudDoxfHAudjpvZmYscy5lOmx8cC52Om9mZg!4e0&token=78498

how to customize chrome theme per window

I usually have three chrome windows open. To easily distinguish my work chrome from the personal chrome window, I would like to set a theme to one window, and another theme to other windows.
I figure out how to change the theme globally, wondering whether its possible to it per window.
Use different profiles. You can do this in chrome by clicking the Proflile icon in the top-right of any window. It'll ask you to log in with your Google account but you're able to make a local account with any name.
I use one for personal (personal google account), one for work (work google account), and a third with no google account for risky or other website browsing (which has more aggressive blocking rules)
I do have in mind 2 options, since I really want to easily identify them.
You can add name to your window, not so noticeable since only shows on hover on mac.
You can also group all the tabs in that window, to give it a bit of a different color
which you can see here. blue and red. Bit noticeable.
for windows users, can you try this options, it might be better there.
I did some research into this issue, and it seems the only way to do this is to open different browsers e.g - firefox for presonal stuff, chrome for work etc...
will be happy to see a better solotion though...

Chrome get stuck on a page with many hidden radio buttons

I have a page which dynamically creates radio buttons.
The page can sometimes be hidden (it's one of number of sub pages presented only when clicking a corresponding menu item).
The number of radio buttons on this page can be high on special cases (about 3000 radio buttons). When it does, Chrome is having trouble handling it.
When the sub page, containing the radio buttons is visible, you barely notice the slow reaction of the browser (but when you compare it to Firefox you understand it's there)
The problem is when the sub page is not visible. The browser almost doesn't respond...(it takes a few minutes to see a respond to a mouse click or event a mouse hover)
Firefox - doesn't have any problem with this page.
IE8 - gets a little slow when the radio buttons are displayed, but bearable.
I'm thinking of changing the entire design of this page, but I am trying to understand this problem.
Does anyone has an idea?
I cannot think of one situation where having 3000 radio buttons is normal. You should consider a redesign. Folks at Google who made Chrome probably haven't tried to tackle a problem like this since your situation is very corner case.
3000 radio buttons on a page? While it may be an interesting intellectual exercise to figure out why chrome is choking on it, the solution is to redesign your page.