Below given is the screenshot was taken while running my application with the dev tool in chrome. Please help me to understand the waterfall diagram. What the green and blue color refers to. My application renders content after a long delay, so I used dev tool to understand my application behaviour. Can I be able to understand the delay that my application make with this diagram?
Hover over a resource's waterfall to view more information about it. The popup gives you a detailed explanation of each phase. Click the request to open up that same view in a dedicated tab. See View the timing breakdown of a request.
Related
I'm trying to take a screenshot of a main part of an application in Chrome Dev Tools, which is wrapped in a UI with top navigation and a sidebar. Slack, Gmail and many others work like that.
When I open Dev Tools, find the div that holds the main content area and invoke Capture node screenshot, I only get the visible part of it: for example, what I currently see in Slack, not the entire loaded history of a channel.
It's probably connected to overflow:auto as I can't even take a screenshot of a very small paragraph here:
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#Examples
Is that a limitation of Dev Tools? Is there a trick of how to take the screenshot of such nodes? I'm especially interested in Slack or Gmail scenarios where the nodes typically have thousands of pixels vertically.
Chrome implemented it in v89: https://developers.google.com/web/updates/2021/01/devtools#node-screenshot
I've a legacy app that features a DND from a popup window to the main one.
It works fine in IE 8 but not in any of the newer versions of IE. The effect results in the drag ghost image being stuck in the source window and not going away after the drop had occurred.
Some debugging did in fact confirm that the 'mouseup' event does not get propagated back to the source window. What can be done to fix it? Many thanks!
ITs a bit hard to begin to answer your question without some code....
use the File>Properties menu to find out which IE security zones the two windows(domains) map too...IE uses a different security model to other browsers... drag/drop is probably not allowed between local web files (using file: protocol) and internet or intranet sites.
Have you used the Dev tool yet to debug it? If you are using showModalDialog (which normally disables context menus) you can right click on a link (a) or input element to display the context menu so you can display the debugger for showModal content page.
If possible include a link to your website or a mashup (jsfiddle) with your questions.
Any help/advice on this would be greatly appreciated.
I'm looking for what I would consider a standard setup for modern day web design/development. Basically I have a dual monitor setup and I would like to code on one screen and have the changes displayed in real-time on the other screen.
Up until yesterday I was using jsbin in this way and it was working great. I had one browser setup with the coding stuff (HTML/CSS/jQuery) and I then had another separate browser open on the second monitor which updated instantly as I typed. So if I changed a CSS rule for example it was shown in real-time on the second monitor without me having to do ANYTHING. No saving, no refreshing, no switching tabs - NOTHING.
However, for whatever reason jsbin now refuses to update in real-time and it will only show the code changes if I manually refresh the browser. I've emailed jsbin about this but they can't diagnose the issue.
So what I'm looking for is either an online alternative, or a local alternative. However, everything (and I mean EVERYTHING) that I've tried so far can't do what jsbin did.
dabblet.com, jsFiddle.net, liveweave.com, codepen.io, cssdeck.com etc
But all of the above don't offer a second tab/browser that I can move to the second monitor to show the code updates in real-time which is the most important thing.
Surely there must be an easy solution to this? Is it not common to code in this way on 2 monitors whilst developing a website? I'd really appreciate any help on this.
Many thanks
Ben
For local option, Brackets has Live Preview mode.
After you open your project or file for editing, select File -> Live Preview
It launches a browser window, then your changes are reflected as you type, no save or browser refresh needed.
I use Liveweave with my dual monitor setup. I keep the HTML/CSS in my left window/monitor and the JS/Preview in my right monitor. Works great!
The tool I'm using to develop a dashboard is Domo Centerview builder. The graphs are not getting loaded when I open the dashboard but it appears only after selecting the controls.
controls like check-box, radio-buttons , radio-group and drop down lists should be placed independently. It should not come under any KPI's if u place it inside any KPI's it wont take the data until some event happens in the dashboard
I assume you are talking about Domo here - which is used to build business intelligence dashboards.
Any graph you create using the analyzer goes to your overview page. You can then move the graphs/cards to the page that you want.
When you ask Chrome to View/Source, it resubmits your URL as a GET, even if it got there in the first place as a post. Is there some way around this for those of us debugging JAX-RS services invoked from forms that can't work with GET?
Two workarounds from this page:
http://www.google.com/support/forum/p/Chrome/thread?tid=1082a452e274f6db&hl=en
Find a working View Source plugin such as "View Source With": http://members.iinet.net.au/~bertdb/ryan/ViewSourceWith/help.html
Workaround:
Open developer tools.
Turn on resource tracking
LEAVE THE TOOLS OPEN. Click on Elements.
Top half should be page. Bottom half should be source code.
Click the Submit button in the top half. Your source code should now update to the proper POSTed source.
CTRL + SHIFT + I