Is it possible to log all actions to script file in chrome or firefox? - javascript

In chrome/firefox, we can click "inspect" or "inspect element" in the context menu.
Then we can select an element, delete, ...
I wondering if it is possible to log these actions to a js script file.
So I can reproduce it later

Related

How to see webpage code if it does not let me right click on it and inspect?

this JS alchemy game is what i want to copy, it s open source and has its code on github.
However, I want to see its code on webpage, right clicking when playing does not show context menu, I can not do "inspect source".
How do I inspect the actual html code?
CMD+ALT+I in chrome would open inspector.

Inspect element without right clicking in Chrome

When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?
Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.
You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox
You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.

How can I locate and debug a specific file in IE11 Dev Tools?

I have a file that is part of a legacy web site I'm maintaining that I need to debug - step into, etc. But I can't see how to do that. The site needs to be run in IE, in Compatibility mode.
When I run the site from VS (2013) by right-clicking the "http://localhost/..." item beneath the solution and selecting "View in Browser (Internet Explorer" and then hit F12, I see on the Debugger tab the file that has been set as the Default page (the "main" page I see after logging in), but from there I don't see how to open a different file - the one I need to debug.
There are a handful of files apparently available for selection beneath the folder icon:
...but not the one I need. If I enter its name in the search box, I get, "No results found." It is beneath a pages folder, but so are those that are displayed. What makes them special? Why can I select those undesirables, but cannot select the only page I care about?
I assume you have the JavaScript file you want to debug somewhere in dist. Just go to that file and write debugger; inside the function you want to debug. The open dev tools in IE and reload the page. Initiate an action that should invoke that function with debugger (if it was not done on page load) and you will be able to debug it.

chrome.browserAction.onClicked.addListener not working as it should [duplicate]

I am following the basics of creating a chrome extension
https://developer.chrome.com/extensions/getstarted
I placed a console.log() statement but it won't show up , should I be using some other API to log stuff on console?
No, you should be looking in the right place.
A background or event page's console and Dev Tools are accessible through the extension list in Developer mode - there will be a link under the extension listing.
Extra note: event page's unload will lose the logs for it.
A popup page's console and Dev Tools are accessible through right-clicking the action's button and selecting "Inspect popup".
A content script's console and Dev Tools are accessible through the normal Dev Tools for the page that the content script executes in.
Extra note: since a content script executes in a different context, you need to select that context above the console if you want to run commands in it, as opposed to the page itself.

How to detect eventd using firebug/chrome?

I wanted to know is it possible to find a which file from several js files, responsible for an event that relates input field using firebug / chrome
If it is possible, how can I do it?
Suppose I have a page with 10 js files and a lot of code in them -
one of the files is responsible for a specific test in the input field.
How can I using firebug / chrome to find out what event is going on and what file it belongs?
If you're using Firebug:
Open Firebug
Right-click the element in the HTML tab
Click on log events
Enable console tab
Click on Persist in the console tab (otherwise console tab will clear after the page is reloaded)
Select Closed (manually)
If you're using Chrome developer tools:
Ctrl + Shift + I (Developer Tools)
Scripts
Event Listener Breakpoints (on the right).
In Firebug:
When you are on the Script tab, click the Pause button (which will start to pulse).
The next time an event happens it will breakpoint, allowing you to step into the function in question
In firefox, debug with firebug. Add breakpoints in your code
In chrome hit Ctrl-shift-i. Add breakpoints within the scripts tag

Resources