Sometimes while I explore a website I came across a javascript function that can serve my future needs so I use the firebug console or google chrome and by inspecting the element on which the function is invoked i get an incomprehensible code
so whats the trick please to get the function attached to this link on the picture?
below there is an example in image that shows what i mean
It looks like the code was minimized by some tool. This creates a more compact form of Javascript so a library, for example, becomes smaller in size which reduces download times and makes the library harder to read. The code is still Javascript but is indeed harder to read.
So to clarify: you are looking at the correct function which handles the click but it has most likely been made harder to read by a tool.
When I look at the sample image you included it looks like the third line
t && !t.disabled && t.click(), e.preventDefault();
Could have looked like this before it was minimized:
if(t && !t.disabled)
{
t.click();
e.preventDefault();
}
I doubt there is a full fledged tool which could completely un-minify this code. Especially because variable names are almost always minified. For example a variable name "persons" could be shortened to just "p". A un-minify tool can not know this, of course.
Also take a look at this question: Tool to Unminify / Decompress JavaScript
Related
I've looked at I can't find a suitable solution.
When you right-click and view the HTML source, then click on the link to a JavaScript (.js) file, the file loads and displays the code.
I want to prevent this. It's been a while but I know you can check to see where it's being called and prevent it from opening if it's not called locally, i.e., on the domain where it lives, but I can't remember how.
This is not possible. If your code is not sent to the client, then the client won't have any code to run, and anything sent to the client can be read by the user. Even if you found a way for the browser to hide it, a technologically knowledgeable user can just use cURL to see the source.
So there is no way to hide code from the user, but you can very easily make it much harder to understand. The most common way of doing this is to obfuscate the code or make it so convoluted and ugly that it would take a while for someone to understand what it exactly does. This is not just minifying the code and making it look ugly, this is using a completely different way of doing the same thing. For example, take this input code:
a = 1;
b = 2;
console.log(`${a} + ${b} = ${a+b}`);
run it through this online obfucator and get this result:
function _0x1450(_0x197943,_0x16e058){var _0x551a06=_0x551a();return _0x1450=function(_0x14505a,_0x1c7cf5){_0x14505a=_0x14505a-0xca;var _0xf62bf8=_0x551a06[_0x14505a];return _0xf62bf8;},_0x1450(_0x197943,_0x16e058);}function _0x551a(){var _0x34958f=['373970NKtNQT','8pCfaUJ','\x20+\x20','4413552ZtbXUP','339267FzcTIn','542560KzWApk','21632xuvhlJ','10518057bZIWFW','1694pVgAOK','\x20=\x20','1622674nEQaGr'];_0x551a=function(){return _0x34958f;};return _0x551a();}var _0x328ff8=_0x1450;(function(_0xb3255b,_0x38cc1a){var _0x317b39=_0x1450,_0x1f62b4=_0xb3255b();while(!![]){try{var _0xaf9fd=parseInt(_0x317b39(0xd4))/0x1+-parseInt(_0x317b39(0xce))/0x2+-parseInt(_0x317b39(0xd3))/0x3+parseInt(_0x317b39(0xd0))/0x4*(-parseInt(_0x317b39(0xcf))/0x5)+-parseInt(_0x317b39(0xd2))/0x6+parseInt(_0x317b39(0xcc))/0x7*(parseInt(_0x317b39(0xca))/0x8)+parseInt(_0x317b39(0xcb))/0x9;if(_0xaf9fd===_0x38cc1a)break;else _0x1f62b4['push'](_0x1f62b4['shift']());}catch(_0x5453e4){_0x1f62b4['push'](_0x1f62b4['shift']());}}}(_0x551a,0x87bdb),a=0x1,b=0x2,console['log'](a+_0x328ff8(0xd1)+b+_0x328ff8(0xcd)+(a+b)));
Does that code make sense to you? Me neither. Does it run? Yes.
It should be noted that code can and has been de-obfuscated, however, it is a laborious task.
Forgive me if this is a really stupid question, but I haven't found any answers yet - or maybe I don't know the correct thing to ask for.
Given the following files that are part of the same project:
MyProject.html
MyProject.css
MyProject.js
(and a MyProject.py that runs on the server to make things happen)
. . . where all three of these items are related and are actually part of a single project and they need to integrate together.
The "html" part of VS code makes sure the html is correct.
The "css" part of VS code makes sure the css is correct.
the JavaScript part of VS code makes sure the javascript is correct.
However, they may not be correct together as a unified whole - I may have changed something in the javascript that references something in the html that may not yet exist - because I forgot to write it, and I don't discover this until I launch things and watch the web-page go all pear-shaped in ways I've never heard of before.
Is there something that will take all these pieces and say "Hey! You changed the definition of this element here in the Javascript but not in the HTML (or the CSS or whatever)
In other words, not only do I want to know if the individual files are syntactically correct, but do they agree with each other?
If there is a "something" that does this, what is it called?
That tool will never exist and for good reasons, it'd slow the living hell out of your computer when programming and wouldn't fair well as a best practice. Though it's cool, it's cooler to write code effectively and not have a slow code editor. So to that suggestion is write your JavaScript and HTML together hand in hand; split view and you won't ever have an issue. CSS can come into play any time.
Your best option for knowing if code is correct, would be a linter but that won't help you with the issues you face if you're calling elements that don't exist or did you'll want to improve how you code these functions/events.
As requested submitted as an answer for the OP.
I have two programs that should be running the same . They are not. I'd like to see where their execution diverges. Is there an option in Chrome or Firefox or Safari to log/echo every line of JavaScript as it is executed ? Or some other way to do this short of manually adding console.log every few lines? Note: the divergence is 10k or 20k maybe 100k lines deep and ideally I'd want it to print variables similar to the Chrome dev tools.
Then I can just dump the logs and find the divergence
Stepping through the code in the debugger is not a solution as it would take hours if not days to step that far.
One idea is to use a babel or uglify plugin to use the last to emit code for each line to print what it is about to do or just did.
Another idea is if there is a way to dump all of memory from js so I can compare all objects and all references. They should be the same so when I see two dumps that differ I'll have found my bug. note: JSON.stringify is not an option as I need to see all variables/objects/classes etc.
Note: I'm not looking for basic answers like "use console.log" or "step in the debugger". I appreciate the help and maybe I've overlooked something simple but I do have quite a bit of JavaScript experience.
Maybe an example would help. Imagine you got the source to an app as large as google docs. You run some processor over it that's not supposed to break anything or change anything. Except it does. You look at the changes and can't see anything wrong. All you know is when you run it it runs but a few things are subtly broken. So you put a breakpoint there and see the data is bad. But when did it go bad? You don't know the code (you just got it). It could have been 100s of thousands of lines before. You have no idea where to put breakpoints or console.logs. It could take weeks. But, given you know the code should run exactly the same if you could print all lines of execution you'd find the bug in minutes instead of days.
You can add debugger; at the begin of the function() or where you want and open the console.
When the debugger is reached it stop the execution. After that you can execute code step by step and add some watches.
It works fine with all recent browser.
Example :
function test()
{
var rand = Math.random();
debugger;
return rand;
}
test();
It is node js but it may be helpful for you. set the NODE_V8_COVERAGE environment variable to a directory, coverage data will be output to that directory when the program exits.
https://blog.npmjs.org/post/178487845610/rethinking-javascript-test-coverage
Using the Firefox Web Console (which can be brought up with control shift k ) I can easily access things like flowplayers.
jwplayer().play(), for example
The console even offers autocompletion suggestions for it.
What does the console do to be in that kind of, for my lack of words and knowledge, namespace?
I tried things like
content.document.getElementsByName('flvplayer').item(0)
Using Pentadactyls JS intepreter (accessed with :js)
This does seem to give me the player handle, or at least it prints out a <html:object> which corresponds to it.
Appending a .play() to it doesn't work, though. It's not a function.
What do I need to do to emulate the Web-Consoles way of doing it?
I realize that this might be a very spoonfeedy question, so if that is not acceptable then I'd still appreciate to get pointed into directions where I could possibly discover the solution myself by reading.
I tried searching for it myself but the terms seem to be quite ambiguous and I usually get results with people talking about their own sites, with scripts running inside of that 'namespace', not from outside like I am trying to do.
(Unless I am wrong about the concepts of inside and outside here.)
Cheers~~
The following command works for me; it defines the command ypl which
plays the YouTube video on the page
command! ypl open javascript:(function()
{content.document.getElementById('movie_player').playVideo()})()
Another example: this defines the ytr command which takes an integer argument and moves the current time position of the video by that amount in seconds
command! -nargs=1 ytr open javascript:(function(){var vid =
content.document.getElementById('movie_player'); vid.seekTo(vid.getCurrentTime() +
(<args>), true)})()
I hope that helps a bit. When I wrote those a while ago I may have tried :js and if it didn't work used :open javascript:....
This is how I'm currently creating a popup for a few links on my site.
function popitup(url) {
newwindow=window.open(url,'name','height=615,width=475');
if (window.focus) {newwindow.focus()}
}
Is there a cleaner way to write this? Also, how do I make the scrollbar appear?
Be sure to change newwindow= to var newwindow=; otherwise you are declaring a global variable every time you run this function.
Otherwise, I agree with fsong's answer that it's a pretty basic function and doesn't need much cleaning. Here's what I would do, but it's minor stuff:
function popItUp(url) {
var newWindow = window.open(url, 'name', 'height=615,width=475,scrollbars=yes');
if (newWindow.focus) {
newWindow.focus();
}
}
I'm not exactly sure what you mean by a cleaner way, the code seems fairly straight forward to me. But you could get rid of the return in the onclick of the anchor tag since it's useless there and perhaps you could use underscore/camel case to name your function (pop_it_up or popItUp) for better readability.
For scrollbars add ,scrollbars=yes to the last parameter (strWindowFeatures) in window.open.
JSLint
I would check your code through JSLint.
JSLint is a JavaScript program that looks for problems in JavaScript
programs. It is a code quality tool.
Like author says JSLint will hurt your feelings, but I think the error you should certainly fix is:
Problem at line 2 character 3: 'newwindow' was used before it was defined.
This is issue exactly like Domenic said.
When you check your code with JSLint your code will also have better success when using tools like Javascript Minifier.
Make Javascript external
I also think you should make Javascript and CSS external.
Using external files in the real world generally produces faster pages
because the JavaScript and CSS files are cached by the browser.
JavaScript and CSS that are inlined in HTML documents get downloaded
every time the HTML document is requested. This reduces the number of
HTTP requests that are needed, but increases the size of the HTML
document. On the other hand, if the JavaScript and CSS are in external
files cached by the browser, the size of the HTML document is reduced
without increasing the number of HTTP requests.
I think you should read Yahoo!'s best practices, because it has a lot of very good tips to optimize your website(javascript).
Why popups?
But Why should you use popups? Some users block these, which renders your site unusable. I would advice you to use JQuery and just load content into the DOM.