Web devTools of Chrome and Opera

Common issues of google Chrome and Opera browser's web development tools.

goo Chrome and Opera dev tools with web tools and Net security|lower


WEB DEVTOOLS OF CHROME

1. Too get into command settings type ctrl+shift+p

2. To disable javascript run ctrl+shift+P -> Disable JavaScript

3. To hard reload chrome or Opera web browser ctrl+F5 or better Right Mouse Button click on reload icon and choose empty cache and hard reload.

4. With developer tools is possible to emulate a mobile device (devtools spoof useragent), geolocation more tools->sensors (but try to combine with corresponding VPN) and network connection speed performance.

5. To get highlighted element in JS console type var $0

6. Coverage panel ctrl+shift+P -> Show coverage shows usage of css and js. 

CONSOLE

7. To enable catching XMLHttpRequest set the checkbox in Console->Console Settings

SOURCES

8. In Source panel it is possible to change css and js temporary until page reload. You can save changes with devtools if you run local server and if you set up workspace in Source->File system

9. In Sources->Event listeners breakpoint it is possible to set up breakpoint on Canvas or Geolocation etc. to catch when some website acts suspicious.

10. It is possible to catch all Ajax requests Sources->XHR/fetch breakpoints write "htt" In network you'll see payload information webpage get from your browser. And you can even escape this request by stepover.

10.1 Or you can type ctrl-shift-p->Network request blocking to block

10.2 I think the best idea is to redact XHR request on the fly and sent to this curious guys.

11. To spoof useragent use Network panel->Network conditions very powerful tool.

12. Too see if webpage too much load your CPU, activate Ctrl+SHift+P->Show Rendering->Frame Rendering stats checkbox.

12.1 To analyse load use Performance -> Frames. Should be green, Red or yellow means overload.

12.2 Performance Monitor panel lets you monitor CPU usage

12.3 To decrease amount of memory push Garbage Collect button on Memory panel. If memory level after GC became higher than after previous GC button push that means problem with memory overload. 

13. Application->cookies allows to delete or edit selected cookie.

14. Use application->Service workers to delete them. Service workers could cause CPU overload. For example while watching utube my CPU runs 50% because of some stupid service worker script. 

15. To catch all background activity on your browser use application->Background Fetch->record

16.To analyse performance and SEO of website use panel Lighthouse

17. Interesting function allows you to see all the listeners on web page set Rendering->Scrolling performance issues checkbox

18. To get into advanced chromium settings type chrome://chrome-urls/

19. To match chromium process number with webpage use chrome://discards/graph

20. U can check webcontent databse that chromium saved on your machine /home/<user name>/snap/chromium/common/chromium/Default/IndexedDB

 

Check all commands from command menu