Webkit Develop Inspektor show long strings - javascript

When i debug javascript in webkit browser(f.e. Safari), often i have some string variables and value of these variables are often very long, webkit make it shorter with "..." at the end, but i want to see all value of this variables, how can i do this?

As far as I know all texts are truncated only when being listed as property of an object. If you're logging a text variable directly, it should show the whole text.
var foo = {bar:Array(1000).join('baz')};
console.log(foo); // this will truncate value of foo.bar
console.log(foo.bar); // this should show the whole text
If you still want to change the limit, here is my quick solution.
It may not be the best way to do this, but if you can find a JS file responsible for Dev tools (for my Google Chrome installation the file is DevTools.js, for Safari 5 - InjectedScript.js), open it in a text editor, look for the function InjectedScript._describe. Inside this function you will find
if (obj.length > 100)
return "\"" + obj.substring(0, 100) + "\u2026\"";
increase the limit from 100 to sth else or remove both lines.

I recently discovered that the Chrome dev tools has a copy function which copies to clipboard - without truncation! Handily it also serializes objects to JSON and DOM elements to HTML, straight to the clipboard.
copy(someLongString); // no truncation!
copy({ foo : true }); // JSON
copy(someDOMElement); // HTML
Since I was trying to copy a long string to clipboard for analysis elsewhere, this served my needs perfectly

Related

How do I view the contents of a set in Javascript in Visual Studio Code?

I am using Visual Studio Code Insiders.
I am teaching myself this as well as Javascript at the same time using a textbook from SitePoint.
I noticed that when I tried to display the contents of my set as shown in the book, I could only display the number of elements in the set. However, I was supposed to see the contents of the set. When using the command line, the contents did indeed show.
Is it my text editor settings, or is this normal? What can I do to be able to see the contents of my sets on my text editor? Am I supposed to keep copying and pasting my sets into the command line to see if they work?
This is what I entered:
const letters = new Set ('hello');
console.log(letters);
This is what VS Code Insider printed:
>>Set(4) {}
This is what the command line printed:
const letters = new Set('hello');
>>undefined
console.log(letters);
>>Set { 'h', 'e', 'l', 'o' }
I find I have no problem printing the contents of an array, so I'm not sure what's wrong.
I noticed that when I tried to display the contents of my set as shown in the book, I could only display the number of elements in the set
Displaying the contents of a variable in JavaScript depends on the environment in which JavaScript runs.
As you pointed out, VS Code displays differently than the command line. Each of them are different interpreters.
is this normal?
Yes
What can I do to be able to see the contents of my sets on my text editor? [...] I find I have no problem printing the contents of an array
Since it works for an array (which indicates that both interpreters have very similar implementation for this type) you can convert the Set into an array when displaying:
const letters = new Set ('hello');
console.log(Array.from(letters));
console.log([...letters]) // or this way

IE Object doesn't support this property or method

This is probably the beginning of many questions to come.
I have finished building my site and I was using Firefox to view and test the site. I am now IE fixing and am stuck at the first JavaScript error which only IE seems to be throwing a hissy about.
I run the IE 8 JavaScript debugger and get this:
Object doesn't support this property or method app.js, line 1 character 1
Source of app.js (first 5 lines):
var menu = {};
menu.current = "";
menu.first = true;
menu.titleBase = "";
menu.init = function(){...
I have tested the site in a Webkit browser and it works fine in that.
What can I do to fix this? The site is pretty jQuery intensive so i have given up any hope for getting it to work in IE6 but I would appreciate it working in all the others.
UPDATE: I have upload the latest version of my site to http://www.frankychanyau.com
In IE8, your code is causing jQuery to fail on this line
$("title").text(title);
in the menu.updateTitle() function. Doing a bit of research (i.e. searching with Google), it seems that you might have to use document.title with IE.
Your issue is (probably) here:
menu.updateTitle = function(hash){
var title = menu.titleBase + ": " + $(hash).data("title");
$("title").text(title); // IE fails on setting title property
};
I can't be bothered to track down why jQuery's text() method fails here, but it does. In any case, it's much simpler to not use it. There is a title property of the document object that is the content of the document's title element. It isn't marked readonly, so to set its value you can simply assign a new one:
document.title = title;
and IE is happy with that.
It is a good idea to directly access DOM properties wherever possible and not use jQuery's equivalent methods. Property access is less troublesome and (very much) faster, usually with less code.
Well, your line 1 certainly looks straight forward enough. Assuming the error line and number is not erroneous, it makes me think there is a hidden character in the first spot of your js file that is throwing IE for a fit. Try opening the file in another text editor that may support display of normally hidden characters. Sometimes copying/pasting the source into a super-basic text-editor, like Notepad, can sometimes strip out non-displayable characters and then save it back into place directly from Notepad.

Creating an export function with JavaScript?

I'm trying to set up an export function in JavaScript for a packaged web app that turns a string stored in localStorage into a plain text file for downloading. As JavaScript does not have access to the computer's file-system, I'd like to set it up so that it create a blank text file (or, failing that, a simple HTML page) and open in in the web-browser; as it wouldn't be accessing any file-systems I was hoping this would be possible.
I was thinking of using a Data URI scheme to open the localStorage as plain text, such as the following:
function exportFile() {
window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData);
};
But it's much slower than I expected, which I guess is because it's sticking the whole document in the URL box. Though probably not an issue with the code, some web browsers, like Google Chrome, won't let me save the resulting file. (And for some reason all the line-breaks have turned into spaces....)
Any suggestions to fix these problems or better ways of doing a similar function will be greatly appreciated!
Did you try something like:
window.open("data:text/plain;charset=utf-8," + localStorage.WebAppData);
For the download, I guess you need a round trip to a server, that will set a mime/type that will make the download box to pop up.
EDIT:
If you use localStorage, may be window.postMessage is available in your environment and could help for speed.
In order to retain line-breaks in the data exported with window.open you may wrap up your data with encodeURI:
var data1 = "Line \n break. And \r\n another one";
window.open("data:application/octet-stream, " + encodeURI(data1));
Otherwise you may export your data encoded in base64 with the btoa function:
var data1 = "Line \n break. And \r\n another one";
window.open("data:application/octet-stream;base64, " + btoa(data1));
Not really a solution, rather a work-around, but your question and the answer by #Mic lead me down this route:
Just use data:text/html as then you can put in line breaks using <br />
I tried everything else (all combinations of unicode characters, etc, ) to get line breaks in text/plain but couldn't get them to show up. document.write() and document.body.textContent(), etc also suffer from the same problem. Line breaks just get ignored.
Since Chrome won't let you save the popup window anyway, the only way to get text out of it is copy and paste so there is no benefit of using text/plain over text/html
In web browsers that will let you save the page (Firefox) you can choose to save the page as text, rather than HTML and so you still get the same end result.
EDIT: This approach works in Chrome, but not Firefox
win = window.open("", "win")
win.document.body.innerText = "Line \n breaks?"
Have to use innerText though. InnerHTML or textContent remove the line breaks. This works on both:
win = window.open("", "win")
win.document.body.innerHTML = "<pre>Line \n breaks?</pre>"
So perhaps you could just wrap everything in <pre> tags? Although I guess both of these have the same "problem" as the ` suggestion in that it's actually creating a HTML document rather than a text/plain one.

How to disable specific JavaScript object

HI All,
Is there a way to disable specific JavaScript object, while all other JS objects will be available for execution? Something like a script in the top line which controls the rest of JS code on the page.
For example I want to prevent navigator.userAgent execution and leave navigator.appVersion available.
Or even more advanced way, the execution result must be defined by me. Let's say my browser is FF 3.6.8 but navigator.userAgent would reture IE 8.0
Mostly I'm interested in disabling or superseding objects results that return information about user Browser, Cookie, Resolution and OS
Thanks in Advance.
Jevgenijs
I'm not sure why you would want to do this, but you can override any properties and methods on the window object just by declaring a variable with the same name in the global scope:
var navigator = {
userAgent: "",
appVersion: navigator.appVersion,
// etc...
}
alert(window.navigator.userAgent);
//-> ""
#All: I added following to user.js file ( link text ) and it helped. Now neither my FF browser nor OS type never recognised by any website even by those showed through iframe like adsence.
user_pref("general.useragent.appName", "replacement string for appNameCode");
user_pref("general.appname.override", "replacement string for appName");
user_pref("general.useragent.override", "replacement string for userAgent");
user_pref("general.appversion.override", "replacement string for appVersion");
user_pref("general.platform.override", "replacement string for Platform");
Now it is left to override following screen.width, screen.heigh, screen.colorDepth but these objects seems unable to be overridden via user.js file.
So far only one idea:... most likely FireFox JS engine retrieves these values from OS, hence I need to know which file in Linux (Ubuntu) stores these values and temporary change it when I need. With any WIN OS it would be mush harder to do since it stores everything in damn registries. Am I right ?
Any more ideas ?
Regards

Javascript: Hijack Copy?

I was just reading the Times online and I wanted to copy a bit of text from the article and IM it to a friend, but I noticed when I did so, it automatically appended the link back to the article in what I had copied.
This is not a feature of my IM client, so I assume this happened because of some javascript on Times website.
How would I accomplish this if I wanted to implement it on my site? Basically, I would have to hijack the copy operation and append the URL of the article to the end of the copied content, right? Thoughts?
Here's the article I was reading, for reference: http://www.time.com/time/health/article/0,8599,1914857,00.html
It's a breeze with jQuery (which your referenced site is using):
$("body").bind('copy', function(e) {
// The user is copying something
});
You can use the jQuery Search & Share Plugin which does this exact thing whenever somebody copies more than 40 chars from your site: http://www.latentmotion.com/search-and-share/
The site that you referenced is apparently using a service called Tynt Insight to accomplish this though.
They are using the free service Tynt. If you want to accomplish the same thing, just use the same service.
What browser are you using (and what version)?
In some newer browsers, the user is either asked if a website can access the clipboard, or its simply not allowed. In other browsers (IE 6, for example), it is allowed, and websites can easily read from and write to your copy clipboard.
Here is the code (IE only)
clipboardData.setData("Text", "I just put this in the clipboard using JavaScript");
The "Copy & Paste Hijacker" jQuery plugin does exactly what you want and seems better suited for your purposes than Tynt or Search & Share: http://plugins.jquery.com/project/copypaste
You can easily format the copied content, specify max or min characters, and easily include the title of the page or the URL in the copied content exactly where you want.
I recently noticed this on another website and wrote a blog post on how it works. The jQuery example doesn't seem to actually modify what the user copies and pastes, it just adds a new context menu.
In short:
var content = document.getElementById("content");
content.addEventListener("copy", oncopy);
function oncopy() {
var newEl = document.createElement("p");
document.body.appendChild(newEl);
newEl.innerHTML = "In your copy, messing with your text!";
var selection = document.getSelection();
var range = selection.getRangeAt(0);
selection.selectAllChildren(newEl);
setTimeout(function() {
newEl.parentNode.removeChild(newEl);
selection.removeAllRanges();
selection.addRange(range);
}, 0)
}
The setTimeout at the end is important as it doesn't seem to work if the last part is executed immediately.
This example replaces your selected text at the last minute with my chosen string. You can also grab the existing selection and append whatever you like to the end.

Categories

Resources