Browser extension to display Page performance and custom events from the page
Performance Event Flow Extension
Performance Event flow is a chrome extension to display some of the Page related events like when Page navigation started and when Page loaded completed in one flow diagram (by default).
By default this extension will cover below page related events.
1. Page Navigation Starts
2. First element visible on the page
3. Page became Interactive
4. Page Load complete
You can also add custom event from your code, if you want to understand performance for some part of the code by pushing event as explained below.
Place below code whenever you want to track event.
window.__performanceEventFlow=window.__performanceEventFlow || [];
window.__performanceEventFlow.push({event:\"\",time:new Date().getTime()});
You can also watch network request after adding the URL details by clicking on 'Watch Network Request'
Read more
By default this extension will cover below page related events.
1. Page Navigation Starts
2. First element visible on the page
3. Page became Interactive
4. Page Load complete
You can also add custom event from your code, if you want to understand performance for some part of the code by pushing event as explained below.
Place below code whenever you want to track event.
window.__performanceEventFlow=window.__performanceEventFlow || [];
window.__performanceEventFlow.push({event:\"
You can also watch network request after adding the URL details by clicking on 'Watch Network Request'
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Performance Event Flow", "description": "Browser extension to display Page performance and custom events from the page", "version": "1.2", "manifest_version": 3, "devtools_page": "devtools.html", "permissions": ["tabs"], "background": { "service_worker": "service-worker.js" }, "action": { "default_popup": "hangon.html" }, "content_scripts": [ { "run_at": "document_start", "matches": ["https://*/*"], "js": ["content-script.js"] } ], "icons": { "16": "images/logo-16.png", "48": "images/logo-48.png", "128": "images/logo-128.png" }, "externally_connectable": { "matches": ["https://*/*"] }, "web_accessible_resources": [ { "resources": ["inject.js"], "matches": ["https://*/*"] } ]}
Read more