A webpage I'm accessing via Chrome, has a countdown timer which refreshes and updates the page/data every 10 minutes. I would like to edit the page locally to change this update frequency. Using the Developer Tools, I've found the variable which needs changing:
var updatefreq = 600;
However, it seems I'm unable to do any edits. Under Sources in Chrome Developer Tools, I can edit various bits of javascript code, however the page is in .aspx, and I can't seem to edit it. Is it possible to get around this?
Under the sources section of DevTools Click on pause script execution. It's on the right column at the top. It is the button farthest to the left border of the right column that looks like two vertical bars. [The keyboard shortcut is f8]
Related
The website of PageSpeed Insight is the only place, where i get CLS issue in both of field and lab data.
Any other Lighthouse instance (by WPT, as API or by DevTools) displays CLS issue only in field data, not in the lab.
How can i diagnose correctly, which elements are causing CLS? Example.
PS: My question has the following cause: analyzing other websites i usually have under devtools → performance red diamonds layout shift, which, if clicked, display in tab Summary some data about this layout shift. Like on the screenshot:
But on the example site i get CLS diagnosted, but not displayed.
The synthetic (lab) tests only load the page (they do not interact with it), whereas field data is until page unload.
Immediately I can see one Layout shift is when you open either of the drop down menus, your scroll bars disappear (due to adding the class .overlayed) and the whole page shifts around. Synthetic tests do not open the menu so will never capture it, however this shouldn't actually contribute to CLS as it requires interaction to open (just something to fix).
The other thing I noticed is the bottom right corner icons cause a layout shift when you scroll and they collapse / open (the floating icons). This is likely to be the cause of CLS as it isn't via direct interaction. Scrolling does not count as user interaction when it comes to CLS.
My guess is that this is the one that gets found by synthetic tests sometimes and not others.
Finding Layout Shifts
In order to find layout shifts you can open developer tools, go to rendering panel (you may need to open it with "more tools") and click "Layout Shift Regions" so it is selected.
Now use the site and you will get a blue box around anything that shifts.
Or you could use performance traces
The other way is to run a performance trace in the performance tab and then just use the site. Once you are done complete the trace and it will tell you if a layout shift occurred and what item caused it.
Tracking them in the field
In order to capture layout shifts in the field yourself you should use something like Google Web Vitals library along with click / mouse position tracking etc and pipe it to your own backend or Google Analytics for analysis.
This lets you find issues with the page a lot more quickly and easily using Real User Metrics (RUM) data in real-time.
I tried to look into this but nothing I do seems to work out.
When I use Chrome, I can click on the link located right below each image in the gallery without any issues .
When I use Safari though, I have to click several times and only a specific area of the link will fire the window.
Here is a screenshot of the link I try to trigger on Safari:
The problem arises when clicking on any of the items listed in the image gallery.
I'd appreciate any help, thanks!
I have had a look over the site you share a link for using the timeline and resource debuging on Chrome and Safari.
It would appear that the issue with the link is not that it doesn't work on first click. It is that the DOM has not fully loaded. If you wait till the DOM has finished its first pass at the HTML, approx 4 full seconds on my connection(~72Mb), the link will work on first click even before all assets (images and JS) has finished loading.
On Chrome this particular page seems to manage to loading the HTML in under 1.9 seconds, before starting to load in assets. Which is why it feels like the link works first time.
Here is a Google analysis of yuour page that reports the same finding. Note Time to Interactive is 14 seconds
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fcfcj-immo.com%2Facheter%2F
When I visit the homepage of my site, the header image at the top of the page loads at 90% width, and then expands to 100% width as the page continues to load. If you scroll down, it looks like all elements that are intended to be full-width, initially load at about 90% of their full width, and then go on to expand.
I am trying to locate where in the code this is happening. I thought it might be in the css style sheet but i'm not having any luck locating it. My best guess is there is some sort of wrapper loading before the image expands?
For more info, the image is being pulled in using the WPBakery Visual Composer plugin. I tried turning off the image parallax, which removed the image entirely.
I'm inspecting the source code, but nothing is jumping out to me (my webdev knowledge is extremely basic). I'm looking for any recommendations for where to look in the code.
I'm not sure what is causing the problem, but the source code can be viewed here: https://dev-nurseregistry.pantheonsite.io/
It seems like something from Javascript is loading after the initial page load.
If you go to Google Chrome dev tools -> Sources -> Then (on the right side) choose Event Listener breakpoints and under DOM Mutation check DOMContentLoaded and reload the page, it will load DOM step by step. On the initial load elements have a bit different style - your div.site-inner is not full width.
When you are clicking that little blue play button on the screen, it goes on another step. After 4 or 5 steps the content goes full width. If you look into the network tab (also in the dev tools) you can see that widgets.js and platform.js were loaded and after those also some images. I'd say that you have to look in your js files for something you load after the initial page load.
When comparing loaded page and partially loaded side to side, it shows vc_section hide-mobile as display: block and vc_section hide-desktop as display: none.
Edit
Just read hungerstar's comment - he shows a bit more of the cause. I just found the result of that cause. Hope it helps.
I'm using Firefox developer edition, trying to debug a page (html+javascript) in a frame.
With Firefox 33, in the debugger section I can see the source code of the page inside the frame, activate breakpoints...
My problem with developer edition is that it doesn't show the html code of the page, although it is selected in the left side of the toolbar. It shows some html code, but it's not from the selected page. I can't locate where is it from.
Is there a way to have the same behaviour in debugger for firefox 33 and developer edition?
Thanks in advance, best regards
This is what GC does to you
Short answer, the HTML of the frame was being garbage collected away by the browser engine. This happens when the page/html has no script active on it which has still some work left to do.
This can be otherwise prevented by holding a strong reference to any object in the page and putting it somewhere where the browser thinks that its still being used.
For example,
window.foobar = some_object_from_the_page
will work.
Here is the root cause and a potential & partial fix is coming up in near future.
I hate Firefox, I really do, but as a web developer I'm chained to it b/c of the robust set of tools that Firebug offers. Recently Chrome and Safari's inspection tools allowed users to edit full chunks structural code (in a very buggy manner), but you still can't edit full stylesheets. Usually when someone brings this up, Chrome and Safari developers say "BUT YOU CAN EDIT CSS," and that's true, to an extent. You can edit CSS property-by-property (which takes forever if you have a lot of changes) in both browsers, but there is no way to see the full computed stylesheet, make edits within it, and immediately see the results. To date, only a full install of Firebug on Firefox allows you to do this.
Has there been any momentum in either of the Chrome or Safari camps to build a plugin to match this unparalleled function? Cheap plugins that allow you to insert CSS into the page are not the answer. It's really simple:
Have a list with the current stylesheets that are being referenced
Choose the one you want to edit, and click an edit button
See all the code in the stylesheet
Make changes and see them reflected on the page immediately
Is it really that hard to build something that does this? I think it must be, b/c why else would the developer communities of two browsers completely ignore it? If there's something out there that now offers this capability, I'd love to hear it; otherwise, maybe someone will step up to the plate and develop it for either Chrome or Safari. It seems like the guys who developed the CSS Edit app would be all over this.
Thanks to you I found it!
The Live Stylesheets extension for Chrome is what you are looking for. Be sure to restart Chrome after installation to use it.
You can edit external stylesheets in Chrome DevTools, too (since Chrome 15 or so). Just double-click the stylesheet contents in the Resources panel (or click the "Edit" button below), edit, Ctrl-S to commit a new revision, Esc to cancel editing. And it updates your page as you type!
You can edit your CSS files directly on Chrome without relying on any extension.
Here is how: Edit CSS files on the fly using Chrome DevTools
A different way to access it:
right click the page, select inspect
on the DevTools, click on "Sources"
locate the css on the "Network" pane and click it
change the css and save it ( by pressing ctrl+s )