I am trying to watch my javascript code using the console.log(text) command - and it does work... but the console gets flushed everytime the url changes.
Is there any way to persist my console logs between page changes?
Click on the bottom-right corner gear icon in the Chrome developers tool, check 'Preserve log upon navigation' option and you are done.
For the record, these days both Firefox and Chrome have 'persist' options in their inspectors / conosole. You need to right click in the console window and then select the relevant option tfrom the popup menu.
There isn't a way to do this yet but from what I've read it is a future feature they will implement. Here is the Issue ticket on it: http://code.google.com/p/chromium/issues/detail?id=77058
EDIT:
Chrome has implemented this feature. Read the answer below
There's only 1 way that I know of, but not with Chrome: With the built-in Web Inspector in Firefox 4+, which doesn't flush the logs between pages.
#scrappedcola notes that Firebug does this as well, but I'm referring to the built-in inspector.
Related
I am not able to enable javascript in Chrome. Under Chrome javascript setting the default option for "sites can use javascript" is grayed out. Even if I add website manually under "Allowed to use javascript" the website is not loading, screenshot below.
This happened while I was trying to find a solution for another issue and followed solution from this page (the top answer), so I went to Chrome Devtools > Sources and clicked on the pause button since then the javascript has got disabled. Paused in debugger in chrome?
Note: Javascript is working fine in other Chrome Profiles. The issue is with this particular Chrome Profile.
Try right-clicking the "Sites can use Javascript" option, and inspect element:
Then, remove the disabled or disabled="" attribute from whatever element the console brings you to.
The option should be enabled. Click it and try reloading your site again.
If this doesn't work, you can try reporting any problems for whatever chrome has (I use Mozilla Firefox and I know they have a help center).
Or try re-installing the browser, because some files may be corrupt (don't worry, if you have an account you can sign-in after the reinstallation and everything should be synced).
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
Why does Firebug say there is No Javascript on this page when there are clearly loads of JavaScript on the page. I even reloaded the page several time to make sure but it still show the same message.
It never used to do that before, but all of a sudden it misbehaves.
Is it because of some configuration issues or because of something else?
As of Firefox version 50, it seems that Firebug will no longer work as Mozilla are migrating to Firefox Devtools. The tab Tools/Web Developer has a 'debugger' option. See this page for a discussion on the migration. Read all the posts dated 19 November for further information.
It seems to me that the option gives less functionality but Firebug per se is never going to be fixed for Firefox 50 and beyond
EDIT 2017 April
This answer is now outdated and I'm not even testing it anymore because I'm no longer using Firebug (a shame, I loved it years ago in a time it was The tool of trade for web developing).
EDIT 2014 November
The original answer is now more than a year outdated due to firebug evolution.
Thanks to #AmadeusDrZaius to keep it on tracks
Answer for outdated firebug versions
For anyone still with this problem after updating Firebug.
Just click Clear Activation List option inside the Firebug menu.
For those who can't find it, note that "Clear Activation List" shows up in the dropdown from the Firebug icon in the toolbar, but not the Tools > Web Developer > Firebug menu.
I guess due to the bug previous hitting your working page it stays listed as "no activate FB for this site please".
I encountered No Javascript on this page after upgrading Firefox to ver 50.0, with Firebug ver 2.0.18. I tried refreshing Firefox, even completely uninstall Firefox and installed again. Nothing works for me.
A couple of hours later, I downgraded Firefox to 49.0.2, and voila, it works right away. I downloaded the old version here.
I tried everything on this list and nothing worked for me except resetting Firefox like so:
https://support.mozilla.org/en-US/kb/reset-firefox-easily-fix-problems
I realize there are already 10 answers to this question, but in my case none of them helped. I'm running Firefox version 39.0 and Firebug version 2.0.11. The only fix is to completely restart Firefox (i.e. not just the tab or instance with the problem).
Perhaps it's due to Firefox's over-usage of memory, or maybe there's a bug in Firebug. I can't speak to that, but what I do know is it didn't work. I killed Firefox, opened the exact same page again with no changes made and now it works. This has happened to me numerous times and a complete restart always fixes it, but that's the only thing that does.
Since Firefox 49.0 and Firebug 2.0.18 the Script panel is broken. This is due to some internal Firefox API changes. And because Firebug is officially discontinued, this unfortunately won't get fixed anymore.
There was also a bug in Firebug 2.0.11 (and below) in combination with Firefox 39.0 causing this problem. This bug is filed as issue 7918.
It happens when the Script panel is enabled and you close Firebug and reopen it.
You can see two related error messages logged to the Browser Console (can be opened via Ctrl+Shift+J or Firebug menu > Developer > Browser Console):
error occurred while processing 'attach: TypeError: docShell is null
Stack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
and
onPacket threw an exception: Error: Server did not specify an actor, dropping packet: {"error":"unknownError","message":"error occurred while processing 'attach: TypeError: docShell is null\nStack: getChildDocShells#resource://gre/modules/commonjs/toolkit/loader.js -> resource://gre/modules/devtools/server/actors/webbrowser.js:53:7
...
Solution:
The only solution until this bug is fixed is to restart Firefox completely.
Similar things have happened to me because I forgot to add the closing tag.
DON'T do this:
<script src="some.url" type="text/javascript">
or
<script src="some.url" type="text/javascript"/>
DO this instead:
<script src="some.url" type="text/javascript"></script>
The same problem just happened to me. I thought that it was a problem in my scripts, but I checked google.com and the problem persisted.
My problem was that I had updated my version of FF and kept the old version of FireBug. When I updated FireBug and everything was solved.
From firefox 49, the fire bug will be built in and it is called fire-bug next. So the fire bug add on won't work properly and no issues will be solved. So you can use firefox inspector. See here for details information
If the problem only shows up on a single page, check that your script folder is referenced from current folder (".") or that's reachable from the server root ("/").
<script src="./scripts/pagescripts.js" type="text/javascript"></script>
may not be the same as
<script src="/scripts/pagescripts.js" type="text/javascript"></script>
As mentioned, sometimes there's a Javascript syntax error that invalidates the whole script. But I have also had this, and simply opening up the page in a new tab or window and refreshing firebug (disable, enable) gets the javascript to show up again.
One time this caught me out was when I published one of my sites and I was checking it out. No Javascript was working, there were no errors in the console and firebug showed no scripts.
It turned out that in that instance, I'd forgotten to allow the site in NoScript - so there really were no scripts being loaded.
Not sure if that's the problem you're facing but it's worth being aware of.
I also got this error when attempting to use Ajax to a different server than the one serving up the page. JavaScript only allows Ajax access to the server that served up the page.
This problem is STILL happening (Aug 2015) with Firefox 39.0.3 and Firebug 2.0.11
For people saying the code is wrong or missing end tags etc. all I did to get all the javascript to reappear in tab was to shut down Firefox and restart it. I didn't change anything. Also that "Clear Activation List" option didn't work (no idea what that means)
I upvoted #Tom_Thomson's answer above, but I am wondering if simply removing and then reinstalling the Firebug add-on might not have accomplished the same thing without losing all the other stuff like bookmarks.
FWIW this problem is still happening in August 2016. I'm using Firebug 2.0.17 with Firefox Dev Edition 50.0a2.
As a workaround, I'm able to use the Developer Tools, though they are not as robust as Firebug (when it's working).
Well Firefox native Inspector is good... I know that you will miss some things, but in general we can survive with it. The good news is... less one addon, FF will be faster :)
When using Safari Web Inspector to read the JavaScript console output, the log is reset upon navigation i.e. going from page index.html to mail.html clears the console output. In the Chrome Developer Tools, I can easily preserve the log by right clicking on the console space and selecting Preserve Log Upon Navigation. With this option, console log output remains intact until I manually clear the output simplifying the process of debugging JavaScript that refreshes or redirects to another page.
Is there a similar feature in Safari Web Inspector?
I don't know when this was added, but it is present in Safari on El Capitan (Safari 9.0). It works the same as in Chrome (right click in the console window and select "Keep Log on Navigation").
Update: As per Daniel Compton's answer, in Safari 11+ this is now under the settings icon as 'Console: Clear when page navigates'.
Update: The setting is now back to "Preserve log" in the Network tab in the developer console in Safari 14+
In Safari 11.1.2 they moved it again(!) back to the Console tab under the "Preserve log" checkbox. The Network log has similarly moved back to the Network tab.
In Safari 11 they moved it to the Settings panel under "Console: Clear when page navigates". It also has a sister setting "Network: Clear when page navigates".
No, there is no such feature (in Safari 5.0 at least). Looking at some Google results, I don't think this feature exists in any Safari version.
As of October 2022, Safari 16 and MacOS Monterey 12.6, for some reason the setting is now hidden here:
As #joseantgv wished in the accepted answer's comments, they excelled again and were able to hide it a little bit more 🤣🤷🏽♂️
For old Safari versions, you can right-click on the console and select the Keep Log on Navigation
I've been trying to get a simple "print" link on my recent page to work. I set up a simple fiddle to show what I'm trying to do.
http://jsfiddle.net/bladnman/4Ux9U/
For some reason Chrome is complaining about:
TypeError: Property 'print' of object [object Window] is not a function
You know, this very very simple kind of thing. Been doing it for years:
Click me to Print
UPDATE #1:
Many users have reported that this is working fine for them on Chrome. I still see nothing but the error reported.
I did want to add my environment:
Version: 21.0.1180.89
OS: OSX Mountain Lion
UPDATE #2:
Big thanks to Arjen! It turns out that an extension (Better Popup Blocker) changed the DOM enough as to null out the "print" function on Window.
Thanks again everyone!
I didn't have any issues with it, but I was able to reproduce the problem you were having on Windows 7 running Chrome 21.0.1180.89 by enabling my popup blocker (I use Better Popup Blocker - Chrome Web Store) for jsfiddle.
If you are using a popup blocker, try disabling it for jsfiddle / the site you are working with.
The Adblocker chrome extension in Mojave stops window.print() as well.