I am trying to console log every changes i make in google developer tools
<div class="test">2</div>
var result = document.getElementsByClassName("test")[0].innerHTML;
console.log(result);
So i have a number 2 inside a div, and it prints out 2 in console, but when i edit this div using google developer tools for example to 3, the console log never prints out new changes i make.
Jquery or javascript?
Nothing is going to re-run your console.log line for you unless you tell it to.
In this case, the thing you'd use to tell it to is a MutationObserver. You'd say you want to see all mutations (modifications) to that element's character data, child list, and subtree (most likely).
For example, if you use devtools to change the foo in this example, you'll get a notification of that change:
const target = document.querySelector(".test");
const observer = new MutationObserver(function() {
console.log(target.innerHTML);
});
observer.observe(target, {
characterData: true,
childList: true,
subtree: true
});
<div class="test">foo</div>
Related
In my JointJs application, I want to discard particular commands so that they are not added in the Undo/Redo stack.
I followed the exact same code snippet from the JointJs documentation like below:
var commandManager = new joint.dia.CommandManager({
graph: graph,
cmdBeforeAdd: function(cmdName, cell, graph, options) {
options = options || {};
return !options.ignoreCommandManager;
}
});
// ...
// Note that the last argument to set() is an options object that gets passed to the cmdBeforeAdd() function.
element.set({ 'z': 1 }, { ignoreCommandManager: true });
But when I look into the options object in the debug mode, it doesn't contain any property with the name ignoreCommandManager.
I have also tried the below call to set the z value but it didn't work either.
element.set('z', 1 , { ignoreCommandManager: true });
Any idea why the options object is missing this property to ignore the command, please?
Initially, It was failing in Firefox when I posted the question here. The cache was also disabled.
I tried in another browser (Chrome) today without introducing any new changes and it was working without any issues.
I have written a decorator/wrapper for window.console so that I, among other nifty stuff, can disable stray console.log's in my production environment.
What i am experiencing is that my wrapper now appears as the source of the actual log command. This makes debugging through the console a bit of a hassle since clicking the link to the far right in the console only leads to my own output function.
The following code is a simplified version of the real script where i have removed some features like enabling/disabling and caching/flushing of rows that have been hidden.
//Save reference to original function
var oConsole = window.console;
//Create custom console output method
var wConsole = function (method) {
return function () {
if (!window.console[method].enabled) {
//Apply log command to original console method
oConsole[method].apply(oConsole, Array.from(arguments)); //This is the row i get linked to
}
};
};
//Create a new console object for overriding original functions
var overrides = {
o: oConsole,
log: wConsole("log"),
debug: wConsole("debug"),
info: wConsole("info"),
warn: wConsole("warn"),
error: wConsole("error")
}
//Using jQuery i create a new instance and extend my defined overrides onto the original version
window.console = $.extend({}, window.console, overrides);
console.log("test 123"); //This is the row i want to link to
When i click the link to the right...
...i get linked to this row.
Is there a way to make a function "transparent" in such a way that the link refers to the callee of my wrapper function instead?
The solution only needs to work in Google Chrome, since I perform the majority of my development there.
Chrome has an option to "blackbox" script files. While this seems to be mostly intended to ignore framework scripts while debugging (blackboxed scripts will be skipped when stepping through code) it will help with your case as well since it will not show as the source for console output.
Open DevTools
Go to settings (F1 or through the main menu)
Open the Blackboxing tab
Enable the checkbox
Add a pattern that matches the file with your console override
Be happy
Source: https://developers.google.com/web/tools/chrome-devtools/javascript/guides/blackbox-chrome-extension-scripts
I was thinking of using React to develop a chrome extension. This app would need to check for any DOM changes on the current web page the user is on.
I have always used react to check DOM updates within the react app itself, is it possible to check the DOM of web pages with a react chrome extension?
EDIT: I tried to use Mutation Observer but its not producing any results here.
var twitter = document.querySelector('#tweet-box-home-timeline > div'); //twitter time-line specific HTML
var observer = new MutationObserver(function(mutations){
mutations.forEach(function(mutation){
console.log(mutation.type); //should log mutation type
console.log('hello'); // should also log
});
});
var config = {characterData: true, subtree: true};
observer.observe(twitter, config);
//observer.disconnect();
}
EDIT2: I got it, thanks!
New/working code:
$(document).keypress(function() {
var twitter = document.querySelector('#tweet-box-home-timeline > div');
new MutationObserver(function() {
console.log(twitter.innerHTML);
}).observe(twitter, {characterData: true,childList: true, subtree: true});
});
}
I have an browser extension for Google Calendar, where I observe the DOM to gather events that are being viewed with:
// content.js
const calendarContainer = document.getElementById('gridcontainer');
const observer = new MutationObserver(mutations => {
// just for test
console.log('content', mutations);
}
observer.observe(calendarContainer, {
childList: true,
characterData: true,
subtree: true
});
It works correctly in "classic" Calendar, but since the last update to Material design, DOM structure is different. So, I tried to change observed element accordingly:
// content.js
const calendarContainer = document.querySelector('div[role="main"]');
Even though I switch between week/day view, schedule or between dates, I cannot receive any new mutations besides first load of the page (after refresh). If you look on the source code trough Developer Tools you can see that DOM is changing, but Observer is somehow not able to see it.
Any thoughts?
According to wOxxOm comment, I have changed it to observe the parentElement, which is not replaced between different calls, and it's working.
I am trying to use a MutationObserver inside my addon. Therefore I inject a content-script which then sets the observer. This somehow seems to work, also the detected mutations seem not be be serializable to JSON.
But actually I want to use this library for monitoring mutations. Explicitly this one is officially mentioned by Mozilla regarding mutation monitoring in addons. But this doesn't work at all.
So anybody got a working example for a working mutation-observer (better mutation-summary - see link) inside a content-script?
My code looks like this:
var observer = new MutationObserver(function (mutations) {
self.port.emit("domModified", mutations); //I gets received as 'Array [{}]'
mutations.forEach(function (mutation) {
console.log(mutation.type); //printing mutation results in {}, printing mutation.type results in an actual string
console.log(mutation.target);
console.log(mutation.addedNodes.length);
});
});
observer.observe(unsafeWindow.document.body, {
attributes: true,
subtree: true,
characterData: true,
childList: true
});
This somehow seems to work, also the detected mutations seem not be be serializable to JSON.
Mutations are not serializable, especially because they contains nodes. If you need to pass something from the content script, to the main add-on code, you need to be sure they're JSONable values.
So anybody got a working example for a working mutation-observer (better mutation-summary - see link) inside a content-script?
I never used the library you mentioned, but I used mutation observers quite a lot; and they're working quite fine. You can see an example here: https://github.com/ZER0/tweet-to-read It basically adds a button to every tweet in the stream that contains an external URL; and I needed the mutation observer to add the buttons also in future tweets. You can have a look to the implementation here: https://github.com/ZER0/tweet-to-read/blob/master/data/observable.js
Hope it helps.