当前位置:网站首页>Do you know these functions that chrome provides specifically for debugging?

Do you know these functions that chrome provides specifically for debugging?

2020-12-08 08:45:21 Crazy technology house

stay Chrome Of DevTools The console in provides some Debug Special function , Every one of them has a unique skill .

Console Utility Functions

These functions can only be used in Chrome Of console in . When I first saw these functions, I was very excited , Write them directly into your own code , The result, of course, is to jump out of all kinds of Uncaught ReferenceError:xxx is not defined error .

$_

$_ Will store the execution result of , Test on the console JavaScript It usually needs to be confirmed step by step , That's exactly what it is. $_ Where it comes in handy :

image.png

 

When you encounter a function that cannot be called in chain, you can use $_ To avoid cursor modification :

image.png

By the way , It is also possible that Pipeline operator To do any function link , Once to promote ascension or avoid modifying built-in prototypes .

let a;
a = 1
  |> ((n) => add(n, 5))
  |> double;

console.log(a); // 12

$, $$

$(selector[, element]), $$(selector[, element])

$ and $$ The difference is document.querySelector and document.querySelectorAll Abbreviation , It comes from the well-known JQuery.

The second parameter can pass in the starting element , collocation $0 You can test an element first , And then start searching from it .

$('.btn', $0)

I often use it. $$ To quickly test something , For example, output someone GitHub All repository names for the page :

image.png

But if you've already put JQuery Introduced as $ Words , It will still be executed normally JQuery Of .

 

debug

debug(function)

Parameter is a function , As soon as the function is executed, the debugger will be triggered , It can be used undebug(fn) To cancel :

function a() {
  console.log(1);
}

debug(a);
// undebug(a);

The effect is equivalent to :

function a() {
  console.log(1);
}
a = (function() {
  const origin = a;
  return function() {
    debugger;
    origin();
  }
})();

monitor

monitor(function)

Usage and debug similar ,monitor When the function is executed, it will output the function name and parameters , You can use unmonitor(function) To stop , But not for arrow functions , If you want to listen to the execution of the arrow function, you have to manually override .

monitorEvents

monitorEvents(element[, eventType])

You can listen to and output specific events for elements , What's special is that it can listen to a single event , You can also listen to event types , For example, output window Click events and all touch Category of events :

image.png

The effect and the following JavaScript identical :

window.addEventListener('click', console.log)
window.addEventListener('touchstart', console.log)
window.addEventListener('touchmove', console.log)
window.addEventListener('touchend', console.log)
window.addEventListener('touchcancel', console.log)

It can be used unmonitorEvents(element [, eventType]) To stop listening .

image

getEventListeners

getEventListeners(element)

Output listener registered on element , Take the example just now , Input monitorEvents(element) Then type in getEventListeners(element) You'll see that all events have been registered for a wave :

image

If expanded, you can see the various properties of the listener :

  • listener: The function that triggers the execution of the event
  • once: The listener will only trigger once
  • passive: Unable to execute event.preventDefault(), It is usually used to improve the performance of the listener , Such as scroll
  • type: Listening event type
  • useCapture: The monitor will be in Capture Stage intercept event

All of the above properties are executed addEventListener The parameters that can be provided by , Don't forget it. removeEventListener You have to fill in the same parameters to exclude the listener .

const options: {
  capture: true,
  passive: true,
  once: false
}
window.addEventListener('click', console.log, options);
// window.removeEventListener('click', console.log, options);

 

queryObjects

queryObjects(object)

The official statement is to return to Constructor All the instances produced , But my understanding is : Returns all the objects in the prototype chain that contain the prototype .

image.png

You can see that a Created for prototypes b It will also appear in queryObjects(A) The results of .

In addition, due to queryObjects It doesn't return arrays directly , So the right-click menu of Store as global variable Put an array in a variable temp1.
 

copy

copy(object)

copy Can handle DOM Or copy the object to the clipboard , I sometimes use copy Turn the object into JSON And paste it into the interface document , Or quickly create or modify fake data in the console .

image.png

It's also very nice to add indentation

 

keys, values

keys(object), values(object)

Output object In itself All of the key or value, Effect and Object.keys(object),Object.values(object) identical , Why emphasize yourself ? If it is to use in To traverse each property of an object , All the attributes in the prototype chain will be taken out and run again :

const object = Object.create({ foo: 1});
object.bar = 2;
for (let key in object) {
  console.log(key)
}
// bar
// foo
In addition to their own key, still more enumerable or not.).

If you want to confirm whether the property is defined in the object itself, you can use Object.prototype.hasOwnProperty

for (let key in object) {
  if (Object.prototype.hasOwnProperty.call(object, key)) {
    console.log(key);
  }
}
// bar

As for why not object.hasWonProperty(key), Please refer to the following code :

const object1 = {
  hasOwnProperty: function() {
    return false;
  },
};
const object2 = Object.create(null);

object1.key = 'key';
object2.key = 'key';

object1.hasOwnProperty('key'); // ?
object2.hasOwnProperty('key'); // ?

clear

clear()

Although click on the top left corner of You can put the Console Clean up , But I'm still used to clear(), It's like typing in a terminal clear like that .

image.png

Pay attention to Preserve log It can't be used when it's on clear Empty Console.

 

173382ede7319973.gif


This article first send WeChat messages public number : Front end pioneer

Welcome to scan the two-dimensional code to pay attention to the official account. , I push you fresh front-end technical articles every day

 Welcome to scan the two-dimensional code to pay attention to the official account. , I push you fresh front-end technical articles every day


Welcome to the rest of this column :


版权声明
本文为[Crazy technology house]所创,转载请带上原文链接,感谢
https://chowdera.com/2020/12/20201208084445624c.html