Excellent. Found some tools I didn't even know about myself. Thanks much for the fast and concise examples and speed of the video. I love your accent :)
Hey thank you for the tips. Especially the posibillity of using "getEventListeners()" I didn't know. But I still don't get the expected result. I thought I would get any function listening for example for an "click" event for the given element. If I write a function listening for an click event I can't find it in the result. Is it not possible? Thx! Great work!
It depends how you are binding the the event listener to the element. for example if you use native JS without any library. similar to the one i have talked in this video, if i add a event listener like $('#myInput').addEventListener('click', function (){ console.log('clicked'); } ) getEventListener( $('#myInput') ) will return an object. If you expand click and first object and then listener you will get the function you have written. For my example here, if i type following line in console. getEventListeners($('#myInput')).click[0].listener > function (){console.log('clicked');} If you use library like jQuery, your actual code for click handler would be burried under their wrapper functions. Does this answer your question?
You can certainly get those. you have to dig little more with the help of JQuery source code. Event listener subTab (right side) in the Element tab does not do the best job as of today as it points to the Jquery library. I am sure someday Chrome will be smart enough to point to your code rather than library.
Good video. These are a part of 2 APIs found in Chrome (and Firebug in Firefox I believe). The Console API is an API that lets javascript call special console function. The Command Line API is available in the command line only. These are not (I don't believe) native javascript functions, but just a set of APIs added on top of the Chrome DevTools app. So Chorme has Dev Tools, Dev Tools has two APIs that enhance it, and there are also extensions you can add to DevTools.
[Deprecation] 'webkitURL' is deprecate, pleae use 'URL' instead. how can we deploy this tipe of console warning message on my computer web browser chrome or opera
Why does getEventListeners only return a few of the listeners? When you go to the Elements tab / Event Listeners tab, you get a lot more (those you saw when you monitored the events). Is it possible to get the complete list? Thanks! Great video!
alobpreis I just found a way: var el = $('input'); while (el) { console.log(el, getEventListeners(el)); el = el.parentNode; } This code was inspired in this answer: stackoverflow.com/a/18592554/2321042
I work in QA, trying to get better to use devtools console. I $('#id').click() a lot to see if I have correct locator for buttons. Id like to be able to "moveToElement", but I don't know how ... $('.someclass').moveToElement() ... i know this is wrong but what is the correct way? thanks
In my chrome almost all the console methods are throwing 'undefined'... even console.log('That JS dude') is not getting prompted!!! What version of chrome you are using, my is 'Version 31.0.1650.63 m'. How to resolve this issue!!! BALA
In your dev tool, at the bottom there is a filter icon (funnel), click on the filter icon and make sure "logging" option is checked. Most likely that is not checked. You can check all the five options (javascript, css, network, logging, other) and try again. If that doesn't work, please let me know
That JS Dude Thanks you very much for your quick response. All the filters are already selected in my tool. I found that only in "ThatJSDude" few console methods are not working. I tried few other site, the console options are working fine in those pages. BALA
balunew456 I would recommend to type "console.log" in the console and see what it returns, if it returns something like "function log() { [native code] }". Then settings is not in right place. However, If it happens to one particular site then might be overwriting console.log = function(){} something like this. I was wondering when you say, you found it on "ThatJSDude", do you mean you found it on "ThatJSDude.com" or anywhere else. Just curious
That JS Dude Yes in "thatjsdude.com/" page console i am facing this issue. >console.log function (){return f.apply(c,arguments);} >console.log('test') undefined Problem:: 'test' is not getting printed.
balunew456 Yah, console.log is getting override, I dont see the same thing for console.log, when i go to the site and i didn't use any such thing in the site. And i searched the uploaded content, i dont have anything that override console.log. It could happen, any of the browser extension (if any), might inject it. But that become suspicious as you are experiencing this issue only for one site. I will take the opportunity to explain what might be happening. console.log is trying to apply "f" function for "c". if you just type "f" and "c" separately in the console that will tell us what are "f" function and "c" objects are. And since "f" function dont return anything which it should arguments. Alternatively you can override "f" and f = function(){return arguments; } you might see an array in the console. Sorry for long answer.
hello sir The link below belongs to my application page. www.konsolosluk.gov.tr/Appointment/SearchAppointment is there any way to change the time of the application via developer mode ?
@That JS Dude. I was hit by ad IED in Afghanistan and it's messed with my short term memory. I can remember some things but not always others. Do you have any tips for remembering these things? ?
It will highly depend on things type of the things you can remember and find a pattern on that and embed new things slowly in to the pattern that works. Besides using few tools will help you to improve your situation. Any generic solution might not be effective...however, if you are open to a discussion, we can talk and see whether i can build some custom technique for you. feel free to reach out: khan4019@gmail.com
Make sure, you have typed "getEventListeners" not "getEventListener" (last "s") and then make sure you are passing right querySelection/ css selectors and make sure you are trying it in chrome... If these doesnt help, share your html, javaScript and the console code you are writing
Really excellent things which I don't know before seeing this video :) Q. Is there any trick to know which complete function is apply on selected HTML element? Just like CSS, we can know what properties apply on the selected HTML element. This is my humble request to you, if you don't know about this please find for me, I will always grateful to you.
I put jokes aside for this one. Though i used couple more in my previous video about JavaScript this. If i found some jokes in a serious video that helps me to complete the video.
I need somebody to safe my life. I need my Chrome to do the following: start every new sound with decreased volume (with no volume at best) that goes up gradually. PLEASE HELP ME! I am begging you!
This is great info, thank you! After watching, I didn't want to forget this stuff, so I started typing up for future reference...then I found you already did on your website: thatjsdude.com/jsConcepts/concepts/console.html You should really link to it in the description! Thanks again.
Excellent. Found some tools I didn't even know about myself. Thanks much for the fast and concise examples and speed of the video. I love your accent :)
Thank you Alexander Conroy for your feedback. I am glad you liked it. Feel free to provide any kind of feedback
Thumbs up if you set up the contentEditable right away.
yep
just type in browser bar:
javascript:document.body.contentEditable = true
and make everybody freak with the news 😂
wow! You really covered a lot, and with nice clean examples. Bonus for doing a recap at the end, it really makes the info stick for the user.
Best and most informative video on web programming I ever saw. Excellent tips.
Hey thank you for the tips. Especially the posibillity of using "getEventListeners()" I didn't know. But I still don't get the expected result. I thought I would get any function listening for example for an "click" event for the given element. If I write a function listening for an click event I can't find it in the result. Is it not possible? Thx! Great work!
It depends how you are binding the the event listener to the element. for example if you use native JS without any library. similar to the one i have talked in this video, if i add a event listener like
$('#myInput').addEventListener('click', function (){ console.log('clicked'); } )
getEventListener( $('#myInput') ) will return an object. If you expand click and first object and then listener you will get the function you have written.
For my example here, if i type following line in console.
getEventListeners($('#myInput')).click[0].listener
> function (){console.log('clicked');}
If you use library like jQuery, your actual code for click handler would be burried under their wrapper functions. Does this answer your question?
Thx! That's a perfect answer. In almost all of my projects jQuery is used. That's why I could not find those listeners. Thank you very much! :)
You can certainly get those. you have to dig little more with the help of JQuery source code. Event listener subTab (right side) in the Element tab does not do the best job as of today as it points to the Jquery library. I am sure someday Chrome will be smart enough to point to your code rather than library.
how i supposed to change value of ajex permently..cz the value is vanishing after refreshing page
sir please tell me what is console warning messages how can we deploy on active browser page
Good video. These are a part of 2 APIs found in Chrome (and Firebug in Firefox I believe). The Console API is an API that lets javascript call special console function. The Command Line API is available in the command line only. These are not (I don't believe) native javascript functions, but just a set of APIs added on top of the Chrome DevTools app.
So Chorme has Dev Tools, Dev Tools has two APIs that enhance it, and there are also extensions you can add to DevTools.
Awesome video! (timestamp ignore: 3:10)
[Deprecation] 'webkitURL' is deprecate, pleae use 'URL' instead. how can we deploy this tipe of console warning message on my computer web browser chrome or opera
can i get hidden e-mail addresses what normally can't show from website accounts with this console?? for example interpals
Why does getEventListeners only return a few of the listeners? When you go to the Elements tab / Event Listeners tab, you get a lot more (those you saw when you monitored the events). Is it possible to get the complete list?
Thanks! Great video!
alobpreis I just found a way:
var el = $('input');
while (el) {
console.log(el, getEventListeners(el));
el = el.parentNode;
}
This code was inspired in this answer:
stackoverflow.com/a/18592554/2321042
how do i use the postmesage command
I work in QA, trying to get better to use devtools console. I $('#id').click() a lot to see if I have correct locator for buttons. Id like to be able to "moveToElement", but I don't know how ... $('.someclass').moveToElement() ... i know this is wrong but what is the correct way? thanks
how to enter values in authentication popup from a console?
How to use console to know your screen position??
How can we trace back functions that resulted in an XHR request
Great tips, concisely explained. Great vid
Wow the events one I had no idea about!
wow this is awesome fars! i didnt even know you can type stuff in the console window hahahaha
Haha
In my chrome almost all the console methods are throwing 'undefined'... even console.log('That JS dude') is not getting prompted!!! What version of chrome you are using, my is 'Version 31.0.1650.63 m'. How to resolve this issue!!!
BALA
In your dev tool, at the bottom there is a filter icon (funnel), click on the filter icon and make sure "logging" option is checked. Most likely that is not checked. You can check all the five options (javascript, css, network, logging, other) and try again. If that doesn't work, please let me know
That JS Dude Thanks you very much for your quick response. All the filters are already selected in my tool. I found that only in "ThatJSDude" few console methods are not working. I tried few other site, the console options are working fine in those pages.
BALA
balunew456 I would recommend to type "console.log" in the console and see what it returns, if it returns something like "function log() { [native code] }". Then settings is not in right place. However, If it happens to one particular site then might be overwriting console.log = function(){} something like this. I was wondering when you say, you found it on "ThatJSDude", do you mean you found it on "ThatJSDude.com" or anywhere else. Just curious
That JS Dude
Yes in "thatjsdude.com/" page console i am facing this issue.
>console.log
function (){return f.apply(c,arguments);}
>console.log('test')
undefined
Problem:: 'test' is not getting printed.
balunew456 Yah, console.log is getting override, I dont see the same thing for console.log, when i go to the site and i didn't use any such thing in the site. And i searched the uploaded content, i dont have anything that override console.log.
It could happen, any of the browser extension (if any), might inject it. But that become suspicious as you are experiencing this issue only for one site.
I will take the opportunity to explain what might be happening. console.log is trying to apply "f" function for "c". if you just type "f" and "c" separately in the console that will tell us what are "f" function and "c" objects are.
And since "f" function dont return anything which it should arguments. Alternatively you can override "f" and f = function(){return arguments; }
you might see an array in the console.
Sorry for long answer.
আহেম ! This is আমাদের গুরু 😁💜
Thanks very much, beautiful content
What happened if I do this
Excellent delivery!!
Awesome!!!
Special thanks for document.body.contentEditable = true!
How to bypass /?a=withdraw&say=daily_limit :/ help i m stuck
use enscription
hello sir
The link below belongs to my application page. www.konsolosluk.gov.tr/Appointment/SearchAppointment
is there any way to change the time of the application via developer mode ?
for(var i=50;i--;){
console.error(i)
}
awasome post....give more this kind of browser js tricks
getEventListener and monitorEvents are not working on my chrome browser.
getEventListeners($('#foo'))
Nice video with really great tips
thank you very much for making pdf for this video
How to restrict jQuery Ajax call from browser console window
@That JS Dude. I was hit by ad IED in Afghanistan and it's messed with my short term memory. I can remember some things but not always others. Do you have any tips for remembering these things? ?
It will highly depend on things type of the things you can remember and find a pattern on that and embed new things slowly in to the pattern that works. Besides using few tools will help you to improve your situation. Any generic solution might not be effective...however, if you are open to a discussion, we can talk and see whether i can build some custom technique for you. feel free to reach out: khan4019@gmail.com
That JS Dude thank you VERY much!! $
very helpful video..thanks a lot bro
Very helpful. Thanks for this guide.
good video it is very help full for me
wow - learned so much in so little time. Thanks.
Useful and great video. Thank you.
not able to getEventListener to work
Make sure, you have typed "getEventListeners" not "getEventListener" (last "s")
and then make sure you are passing right querySelection/ css selectors
and make sure you are trying it in chrome...
If these doesnt help, share your html, javaScript and the console code you are writing
console.groupCollapsed('texture');
console.error('К сожалению, анкета удалена')
console.groupCollapsed('texture');
console.error('К сожалению, анкета удалена')
console.groupEnd()
Awesome video. keep it up :)
this is great. please make more videos
You could just do document.designmode='on'
Amazing video, very help full thanks a lot man ..!
Man, this is cool stuff! Thanks.
Really cool stuff, thanks a lot.
console.groupCollapsed('0');
console.error('0')
console.groupEnd()
Thanks , this is very useful
very useful. Thanks!
Really excellent things which I don't know before seeing this video :)
Q. Is there any trick to know which complete function is apply on selected HTML element? Just like CSS, we can know what properties apply on the selected HTML element.
This is my humble request to you, if you don't know about this please find for me, I will always grateful to you.
console.error('0')
Very good
HOLD DIS BABAY, hahahaha
glad u noticed. that the only not so serious part
That JS Dude haha seriously crack up all the way through, are you intentionally being funny? Best tutorial ever haha
I put jokes aside for this one. Though i used couple more in my previous video about JavaScript this. If i found some jokes in a serious video that helps me to complete the video.
thx for advice
?
!
can u help me plz i cant show pass on 192.168.1.1
Thanks ...
function off{
console.warn('Off');
}
nowadays $('a')===document.querySelector('a') is
false but it's still making the same think
very helpful.
I need somebody to safe my life. I need my Chrome to do the following: start every new sound with decreased volume (with no volume at best) that goes up gradually. PLEASE HELP ME! I am begging you!
Very helpful for me.
Thanks
Too Good....
'Hold this baby' BWHAHAHAHAHAHAHAHAHAHAHA!
This is great info, thank you! After watching, I didn't want to forget this stuff, so I started typing up for future reference...then I found you already did on your website: thatjsdude.com/jsConcepts/concepts/console.html
You should really link to it in the description! Thanks again.
your pdf link helped me a lot, thank u
awesome...Thanks! very clear
Programming hero
CTRL + SHIFT + I
I scammed target by editing a price on amazon to 9.99 and price matched
I don't know why but I have a weird feeling I'm being scammed
Hello sir
Just get lost and help d economy :) lmao
I didn't understand what he meant by that
Subtitles are hilarious
Ryann Paqueo ROTFLMAO!!!!!!
#chrometools
if only you had a good mic
Hi, excelent video!!
How do I make it through the console that all tags expand? Since to give in Expand all, not all expand.
See:
prntscr.com/f9hxgy
isn't his way of speaking very bad? He said, "just get lost", "if you are lazy",
Works on roblox thx me later
fc of
tooooo fast
scam hes indian
pls dont tell me that ur indian? xD
why
Nice video with really great tips
ไป