Save Safari javascript console to file? - javascript

Is it possible to save out the javascript console in Safari Web Inspector to a file? I can't find any way to do it, and the only way to select all is to drag with the cursor (very difficult when I have a long continuous stream of log output).

I figured something out:
While holding down SHIFT, select the start of the part you want. Then release SHIFT and scroll down with the scrollbar.
Shift-click again on the end of the selection. Then you can copy/paste as needed.

Click inside the console, ⌘s. There is no step 3.
Note that this saves the output in plain text so there's no colorization, highlighted fields, etc.

I can just use select all context menu after I clicked the gear icon to right of console tab in developer tools then unchecked "Wrap lines to editor width"
With this checked I could only copy first line, unchecked I could select all and copy/paste into a text file.

Related

Pause a javascript

I'm looking for a chrome feature similar to debugger/breakpoint that lets me pause a script.
Why. I like to test some css in chrome-inspector. Since it's a loading spinner it will only be visible for some milliseconds. That time is to short to play with css ;)
Why not breakpoint...
Because chrome covers the entire page with a black layer so I cannot right-click and inspect a DOM-element as I like.
So is it possible to get rid of the black layer chrome has in debegger mode? or can I simply pause a script, play around with the css and the play it again.
Thanx in advance.
In your Javascript, you can simply write:
console.log(element);
debugger;
When the Chrome developer tools console is open, this line will pause your script without placing a breakpoint manually. console.log(element); will let you access the element you wish to debug or modify via the console.
After the script stops, you can use the DOM explorer, select your element, and in the DOM properties window, under "Styles", change its display property to none to make it disappear.
I found an ok answer to my own question. Simply use the select-element tool in chrome rather than right click.
Icon to the left
It temporary removes the black-layer until the element is selected. But if you want to see the correct colors without the black layer covering it you need to display:none it in the inspector. Also if you want to work on hovers or other similar stats the black layer will prevent hovers and such.

$(":animated").length - Always return 0

When I execute the following command with the developer tools of firefox/chrome on a site with an animation it always return 0.
$(":animated").length
I want to find out how many animations are on the entire site.
Did I forgot anything?
I have have no code except this line. I only insert it in a chrome/firefox console.
Cause you must select first the container.
It works with (Chrome)
$("body :animated").length
I've try on https://api.jquery.com/animated-selector/
Try the following:
Open debugger in chrome.
Click the sources tab.
on the left side click the Snippets Tab
right click the empty white space and choose new
name it "script.js"
on the right under the script.js tab enter:
console.log($(document).find(':animated').length);
Hit Ctrl+S to save
now right click the script.js file on the left and choose run
The console will output the number of animated elements on the document.

How can I copy text from some site which disable right click, and also select text?

How can I copy text from some site which disable right click, and also select text?
I mean I cant select any text from that site, and also I cant right click on that site.
Do I have to Inspect Element and Find that text?
or is there any easier way?
In Chrome or any of the popular modern browsers, open Developer Tools by pressing F12 and then click on the magnifying glass icon (or equivalent icon in other browsers) to turn on inspect mode. Move to the content within the web page and point to the specific portion of text that you want to copy. The HTML code corresponding to the pointed area will appear in the docked Dev Tools window. Double click on the HTML code to copy the content you need.
Alternatively, you can save the page as a text file in Internet Explorer and then you can get just the text within the web page in the text file. In IE, choose File > Save As and in the dialog box that opens up, specify the Save as type as Text file.
Also you could try the site after disabling JavaScript in your browser.
For doing so, you have several methods:
Disable JavaScript
Remove the event handler(s) (if you are a developer)
Use DOM
You could use latest Intenet Explorer.
Caret Browsing is a new feature introduced in Internet Explorer 8 and later. With this feature enabled, you can use the navigating keys on the keyboard, select text & move it around within a webpage .
You can select and copy snippets of text as short as a single character by using only the keyboard. Other content types such as tables or images can also be selected and copied.
Enable Caret Browsing in Internet Explorer
To turn on Caret Browsing in Internet Explorer, press F7.
It can be enabled on a per tab basis or for all tabs and windows. Moving the cursor within the text of a web page is like moving the cursor within the text of a Microsoft Word document. To select text, hold the Shift key & press the arrow keys.
Instead of using a mouse to select text and move around within a webpage, you can use standard navigation keys on your keyboard : Home, End, Page Up, Page Down & the arrow keys. This feature is named after the caret, or cursor, that appears when you edit a document.
Reference here.

How can I inspect disappearing element in a browser?

How can I inspect an element which disappears when my mouse moves away?
I don't know it's ID, class or anything but want to inspect it.
Solutions I have tried:
Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.
Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.
SUCCESS:
I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.
(This answer only applies to Chrome Developer Tools. See update below.)
Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.
Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:
Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t #sulco on Twitter
An alternative method in Chrome:
Open devTools (F12).
Select the "Sources" tab.
While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution and "freeze" the DOM exactly as it is displayed.
From this point, use Ctrl+Shift+C to select the element.
Open console
Type in setTimeout(()=>{debugger;},5000);
Press Enter
Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.
Useful tip to avoid repeating those steps above every time:
add this as a bookmarklet:
Bookmark any page
Edit this new bookmark
Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();
Next time you wish to use this, just click/tap this bookmark.
Verified in 2022
Do the following:
Open the console and navigate to Elements tab
Type command + shift + P (OSX) or control + shift + P (Windows)
Type the word focused
Select Emulate a focused page from the the menu
Now clicking around in the console will not close the element.
I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:
Right click and go to inspect element.
Go to sources tab.
Then hover on the element.
Then using keyboard F8 or Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.
In Firebug there are different solutions for this:
You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
You can right-click the element and choose Inspect Element with Firebug
Also you may want to follow issue 551, which asks for a way to temporarily block specific events.
Edit:
To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.
Sebastian
In my case, I used Expand recursively option on google chrome:
The steps are:
Inspect the dropdown field
Find the dynamic DOM (the purple highlight)
Right-mouse click on that dynamic DOM
Choose Expand recursively:
We can see all elements are there
Here is a demo:
Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.
It take you to the sources tab.
Go back to Elements tab. This time code will not disapper.
There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.
enter image description here
you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.
This is possible with firebug in firefox or the built inspector in chrome.
I've written an article about debugging CSS of disappearing elements
Using hotkeys to automatically go into debugger mode with hotkeys keyboard shortcut:
Install the shortkeys extension
Click on the extension icon and chose "options":
Configure as follows:
Click "Save shortcuts" button (bottom-right)
Now, go to any page, make sure devtools is opened, and hit CTRL+SPACEBAR keys, while your inspection target element is visible.
I'm using Windows OS and this hotkeys combination is good for me and is not "taken" by any other shortcut, but of course, you can choose any other.
i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution:
open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools

Debugging onFocus event using Chrome Developer Tools? Can't return focus after break point

I'm trying to debug a JavaScript onFocus event attached to a bunch of text boxes on a page. The bug occurs when selecting a text box and then tabbing to the next text box. I'm trying to debug this by placing a break point in the onFocus event using the Chrome Developer Tools. The problem I'm facing is that when I select a text box and the break point is caught, Chrome Developer Tools steals focus and does not return it, so I can't tab to the next text box. Anyone have an idea for a work around? I guess I can resort to alert statements to print all of the information I need without using Chrome Developer Tools......
Chrome Dev Tools includes a Play/Pause button both in the Inspector and as an overlay to the webpage. Using the overlay prevents focus from landing on the Inspector.
Also, I've found the following type of logging solution to be easier to track than the interval method (thanks to less redundancy and the ability to pick up on changes that occur more rapidly than the interval):
$('*').on('focus blur', function(event) {console.log(event.type + " to:"); console.log(document.activeElement);});
One option for debugging tricky cases is to set an interval to poll the focus in the console.
setInterval(function() {console.log($(':focus')); }, 1000);
Type this in the console (update it to include whatever details you are interested in), hit enter, and then keep the console where you can see it while you do stuff in your UI.
*MDN docs for setInerval()
You are right, Chrome DevTools receive focus and do not restore it when you switch back to the debugged page. Feel free to file a bug at http://new.crbug.com (make sure you start the summary with "DevTools: " so that the bug can be assigned to the appropriate team as quickly as possible.)
On a side note, console.log() is a slightly better alternative to alert() as it allows formatted output.
There's a checkbox in the Rendering tool of Chrome DevTools labelled "Emulate a focused page". This prevents the webpage from getting blur events when you click on DevTools or other windows.

Categories