The current project I am working on builds a page's javascript code based on some conditions. All the code works but when I go to the Developer Tools to see it, it is not showing. Or more like it is truncated and 3 dots added at the end.
It seems to be a change with the recent update. It is extremely annoying to not be able to see everything. Does anyone know how to make it show everything? If it helps, I'm working on a mac. Thanks.
Chrome Version 42.0.2311.152 (64-bit)
If you right click on the <script> tag and select "Edit as HTML", you'll be able to access the whole script, without the hyphenation.
Related
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've put up a code for commenting box on my html file for the visitors to comment on something in my website, and the code is provided from a website that offers it for free.
The problem is, the commenting box is visible and functions perfectly on Internet Explorer, but in Google Chrome Browser, or FireFox Browser, the commenting box doesn't even appear on the screen. When i view source by right-clicking, the code is still there, but does not show on the screen, and I think something is wrong with the code.
I have tried to fix this myself, and I could not figure this out alone.
Here is the code that was provided from the free commenting box website.
<div class="js-kit-comments" backwards="yes" paginate="10"></div>
<script src="http://js-kit.com/comments.js"></script>
I wish i could provide more code, but honestly, this is basically it.
I really hope you guys can help me out on this one. Thank you in advance.
The big js code isn't made to be compatible.
First line :
try { if(!window.JSK$EPB && navigator.appVersion.match(/[345]\.[.0-9 ]+Safari/)) {
This is not the task of SO to adapt and/or debug a big proprietary script in the blind.
An alert/prompt called from chrome extension background pake is shown off the screen (or partially in top left screen). This bug has been fixed in canary build by now, see
http://code.google.com/p/chromium/issues/detail?id=113899 , but I need to get it working as soon as possible. Do you have any ideas how to work this around using javascript?
Thanks in advance.
PS: I'm talking about this extension: https://chrome.google.com/webstore/detail/jfiakckbklmccchjegnnojbalafebakb
You can't position the alert or prompt dialogs in browsers. You have to wait for the bug fix to propagate to the stable branch.
An alternative option is to inject an HTML lightbox into the current tab but that would be a lot of additional work.
One way to go is to further investigate the canary source code, found at the Chromium project on Google Code.
The issue is reported on the Chromium issues page, and the fix seem to be found at this revision on the Chromium sources.
You can check out the diff and compile a workaround based on their solution.
Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.
Is there a way to reduce or filter the number of scripts shown in script debugger? With Chrome it just shows the file containing the scripts instead of every single script block.
Also, when I set debug points on an inline script and go through the code the page reloads and selects the first script in the drop down. I then have to reset all my break points.
Overall Opera seems to be pretty cool, just need to find a way to work around these few annoyances.
I don't think there's any way around these at the moment. My experience with Dragonfly is pretty similar... Overall it's great but there's a couple of small annoyances :)
You could try filing a ticket to get it fixed.
There's a filter in the Scripts dropdown now, should make it easier to get where you want to go. On breakpoints, I'm not sure what you mean. They shouldn't disappear unless you close Dragonfly or change the debug context. You can always see all Breakpoints and navigate directly to them from the Breakpoints panel on the left.
If not, then yes, please file a bug.