DevTools : In the Performance tab, is it possible to capture the whole page with screenshots - google-chrome-devtools

The screenshots recorded in the Performance tab only show the top of the website. Is there a way to capture multiple screenshots of the full page when it is loading?
If this is not possible in the DevTools, do you suggest another tool?
This is done in an attempt to fix CLS issues.
I tried grabbing the screenshots directly by inspecting the DevTools but they only show the top part of the website.

Related

Why does Flutter show another page in the stack before showing the actual page on Back event

I have built a functioning flutter app using Navigator 2.0 API and RouterDelegate. All the navigation works fine but the problem is on the back event. On pressing back either from the app bar or from the device button, the top page does pop but the page that is 2 layers deep in the stack is displayed for a fraction of second before the desired page is displayed.
Like in the attached image, when going back from ArchivedChatThread, Bots is displayed for few milliseconds and then another page is shown. Here, the stack is also not proper as there should be one page between Bots and ArchivedChatThread i.e ArchivedChats.
I tried a lot of different things but am unable to find a solution as this is my first flutter app and Navigator 2.0 being a relatively new and complex concept.
image
Any kind of help is appreciated. Thanks!

Debugging multiple load and DomContentLoad lines in Chrome Developer Tools Network Tab

In the Chrome Developer Tools network tab, there are times for Load and DomContentLoaded. These are marked as a red line and a blue line in the network tools.
https://developer.chrome.com/devtools/docs/network
When analysing some websites, multiple Load and DomContentLoaded event load marker lines appear with the later line updating the final Load and DomContentLoad times in the bottom bar. I am trying to understand why there are multiple event marker lines as the documentation says they should only appear once. It looks like it something to do with pre-loading or iframes but I am not sure how to fully investigate.
A screenshot is below (website tested is http://www.lululemon.co.uk):
The lines represent the DOMContentLoaded and Load events from multiple page loads.
When you navigate to a new page Chrome is clearing the list of requests, but the overview is still showing the already recorded data.
Sometimes you can have a multiple DOMContentLoaded events without a Load event, because it's possible to navigate away from the page after the DOMContentLoaded event, but before the Load event.
The whole recording in your screenshot covers 2.5 minutes, but the time from page navigation to page full page load is shown as only 1.7 minutes in the bottom bar.

Site iPhone layout breaking on 1 page but not another similar page?

http://littlegiant.co.nz/preview/tradeworks/
If you look at the home page on an iPhone you will see the menu drops down to the next line, but if you go to any of the other pages it doesn't.
What could be causing this?

Google Chrome page bottom cut off

Since google chrome updated to 11.0.696.60 some days ago, it cuts off the bottom of popup pages ... the status bar is displayed OUTSIDE the window at the bottom. Here is an example how it happens on the Facebook share popup, like shown in the screenshot:
On the left window the share and skip button disappear totally. The page seems to be larger than the window but resizing the windows does not uncover them. When you hover over a link, the status bar appears outside the chrome window ... strange! Maximizing the window or going into fullscreen mode shows the bottom. I detect this behavior on different popup pages on different systems ...
Is this a setting thing or a bug?!?
Since I code something with this fb share function (fb jsSDK)
ok, i found now there is a thread at the chromium forum regarding this issue:
here
Just managed to fixed this issue by reverting the theme back to the default.
options > personal stuff > themes > reset to default theme
For me the problem was occurring due to a zoom level exceeding 100%. Setting the zoom value to 100% fixed it.

Link Target in iPhone Based web app

I am building a web application that is to be run by adding the app to the home screen. Currently it has a list of users, clicking on a user takes you to a detail screen for that user and on that screen is a notes link to take the user to another screen with a grid of notes and a text box to add more notes.
When any links are clicked/tapped, the link is opened in Safari, not the current full screen Safari instance. I tried setting the target of the link to _self, but this had no effect.
Any ideas?
I learned a full screen iPhone webapp can only be a single web page. Any link you try to open will launch Safari instead of replacing the current page. To combat this, I used asp.net postbacks with panels to hide/load/show requested data.
I use target="_webapp" and it works just use for example <a href="http://your.link" target="_webapp"> and it gonna open the link without exit landscape (full screen) i dont know why but with some of my webapps works and sometimes dont.