I opened a developer tools in the middle of running JS and found behavior is I to save for in depth analysis. Is there any way I can save the complete information in all of the developer tools screen?
Assuming that you're talking about Chrome Dev Tolls, if you want to save the information in the Console, just right click any blank space in the Console an choose 'Save As'.
If you need to save the information in the Performance section, there's a Save Profile button (with an arrow down icon) in the top, you can save a JSON with all the information.
And there's another cool way you can debbug your Javascript code with Chrome Dev Tools: you can stablish breakpoints in your code. This article here explain how you can do it with an nice example.
Related
I am using Visual Studio Code version 1.41.1, Live Server 5.6.1
I opened the Toggle Developer Tools from Visual Studio Code \ Help menu, then wrote some JavaScript code and console log, and expected that the variable results displayed on the Toggle Developer Tools automatically but it only displayed something like :[Extension Host] Change detected..." (refer to the attached screenshot:
Anyone can tell me how to make the variable result displayed on the Toggle Developer Tools automatically after saving changes on my JavaScript file?
Thanks
Edited answer:
In most browsers, there is a function called "Inspect" or "Inspect element" that opens up the developer tools. This allows you to use many different tools, like changing the DOM, running JavaScript, finding the sources of linked files, change the CSS and other things. This tool set can be used to mess around, but also for other purposes, like cheating on online tests. That is the reason that many schools have blocked this functionality from the students. Being a avid learner and programmer, I decided that I would use other methods. I am wondering whether or not I could use JavaScript to open the Developer tools panel, even though I am guessing that JavaScript can't react with the browser, only the page. If there is a JavaScript alternate for the developer tools menu, please tell me about it. Thank you for your time, I really hope that I get question asking back. For anyone wondering, I am only really able to interact with a page through bookmarklets.
here you go
javascript:(function()%7B(function() %7Bvar x %3D document.createElement("script")%3Bx.src %3D "https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2FSnowLord7%2Fdevconsole%40master%2Fmain.js"%3Bx.onload %3D alert("Loaded Developer Console!")%3Bdocument.head.appendChild(x)%3B%7D)()%7D)()
paste into url section of bookmark and name it what you want.
If it's a custom build Chrome version and they disable or even remove the tool, then there is nothing you can do.
Chrome interface is not under control of Javascript, which is only for render. You can access (if is enabled) using hotkeys (Ctrl+Shift+J or I), F12, right click elements or access via the interface.
Try creating a bookmark and calling it 'Inspect Element'. Then assign this code to the URL part of creating the bookmark:
javascript:void(myDiv=document.createElement('div'));void(myBody=document.getElementsByTagName('body')%5B0%5D);void(myDiv.style.background='url(http://www.andybudd.com/images/layoutgrid.png)');void(myDiv.style.position='absolute');void(myDiv.style.width='100%');void(myDiv.style.height='100%');void(myDiv.style.top='0');void(myDiv.style.left='0');void(myBody.appendChild(myDiv));
I am a new web developer and just started working. i am doing debugging and fixing errors now. so the website is so huge and i have access to the whole code. if i get an issue saying fix heading "my heading" to "my own heading", its easy to locate where the code is by doing a search on the code editor like visual code, but how do i know where exactly is that "my heading" is on the website. i tried development tool, it is limited due to alot of code is traspiled so code on editor and development tool is not the same. is there a solution ? it is killing alot of time, asking co workers all the time seems not right either .
to fix errors of html you can use this web site: https://validator.w3.org/
Have you try to use "Console" direct from the browser? if you use chrome, you can run the code inspector by doing right click on the webpage and there you can search for specific line of code, tag, and so on, or modify right there on the inspector the java code and run it to see if its working properly.
Hope it helps, regards.
This website (www.samy.pl) uses some technique so that no one can inspect the code (Ctrl+Shift+I) or view source (Ctrl+U). It can detect if you have opened the console or inspector the code automatically changes.
How this is possible?
You could always save the website.
In chrome open the menu -> more tools -> Save page as..
You should be able to run the html file in chrome, and use Dev Tools without it blocking you.
There is a console "clearing" API that is mentioned in this answer.
Here's what I think is happening:
First, I think Google Chrome DevTools emits an event when it is open/launched.
The page author listens for this 'launch' event with the following handler logic:
Run a chrome.devtools.inspectedWindow.eval DevTools inspection API
Set document.body.innerHTML to the winky-face div
Also, a setInterval that executes a console.clear() before the console.log() of "no source for you".
I also inspected the EventListeners tab of Chrome DevTools while reading the "no source for you"-page.
Unfortunately, the two event listeners you can view don't seem to do anything useful:
one returns false
the other wires together forms and their associated submit actions.
Hope this helped
hahaha, this is a good one, you should not expect less from samy!
Now I see why people think it is the wrong answer (the source get replaced if you do otherwise)
1.Navigate to site with inspector open there you end up with "No source for you! You found easter egg #7."
2.and then check the source to find Easter egg #2:
view-source:https://samy.pl
you will see:
/*
No source for you! Easter egg #2
*// AFTER SOME LONG WHITE SPACES HERE /.source.replace(/.{7}/g,function(w){document.write(String.fromCharCode(parseInt(w.replace(/ /g,'0').replace(/ /g,'1'),2)))});
This is the way he loads the site(by injecting js), by replacing two type of white spaces for 1 and 0 and parsing that to char code by some regex and then that to string of course :D
https://de.wikipedia.org/wiki/Whitespace_(Programmiersprache)
If you paste that part to a js console, you will get the tags that loads the page.
ps. to see the rendered source, just load the page normaly and hit F12 after disabling javascript.
Have fun!
Create an index.html somewhere, containing an <iframe src='https://samy.pl/'>. Load it in your browser and then open devtools. You will see the source inside the iframe.
Update:
Go to view-source:http://samy.pl which is the link of what the view source right click brings you to. It only works on Chrome I think.
If you are using chrome, go to the menu at the top right. Then go to more tools, and click developer tools.
After a lot of tinkering and speculating together, my roommate succeeded in the end with quite a naïve approach.
Simply open the Chrome devtools and copy out the source before it gets replaced. Giving Chrome processes low priority and doing some heavy-lifting with your CPU (compilation or other) helps.
Chop, chop.
Ah! I have found an extremely easy way to do it.
1. Open Firefox (Chrome only shows you part of it).
2. In the URL bar, type in javascript:alert(document.documentElement.outerHTML);
3. Press Enter.
4. Voilà!
New Way to find the source code! But its complicated!
Open a new tab.
Open Devtools (Inspect Tab)
Click On Toggle Device toolbar (the mobile like icon)
Click on "No Throttling" to slow down the page loading time
Select "Low - Tier Mobile"
Open the page!
When you see the icons appear on the page, you can now see the source code! :)
sorry very late
but i think i have the answer
He used this node package
to which he has contributed and forked too
the package docs say that it wont work if the devtools are undocked
You can simply use the developer tools in almost all the browsers. Just Press F12 and the developer tools section will be there.
Thanks
I have a piece of JavaScript code running in browser and I want to pause it to see what values are in the console.
I have a lot of logs going on so I need to see whats logged at a certain point through running the script.
I am running chrome, is there a button or shortcut to do this ?
Whenever you want to add breakpoint enter the following in debug console (F12 in Chrome):
debugger;
It works in most browsers.
You must to use developer tools. If you use the debugger you can put break points and pause in exceptions. You can view variable values, objects structure, and much more information.
Maybe this link is useful for you: https://developer.chrome.com/devtools/docs/javascript-debugging
Good luck
PD: Note that firefox's developer tools are better and more complete than chrome developer tools, but in essence are for the same purpose.
F12 brings the Developer Tools. There, go to Sources and pick your source script. You may either change some lines to include a debugging directive, namely
debugger
which will pause the processing and let you fiddle around.
There is also a possibility of signing a line where you want to pause, by simply clicking on the line's number in source view in the developer tools.
This is what you are looking for.
https://developer.chrome.com/devtools/docs/javascript-debugging
You can pause scripts and hover your mouse over to see variable values at that point in the script. Enjoy.
Open Developer Tools (Ctrl + Shift + I)
Go to Console tab
Paste this to the console:
setInterval(() => { debugger; }, 5000)
Now make the page to be on the state that you want (open drawers, open gallery menus, etc...) after 5 seconds (you can tweak this 5 seconds by changing 5000 to other numbers 5 * 1000 = 5000) website will freeze.
Now do what you wanna do with the site!