What's new in Devtools
2018 @ SnowCamp
Qui suis-je ?
Jean-François Garreau
Front-end developer & Community Manager
Config / Activation
Activation des experiments
Helpers
Unified menu
CTRL(CMD) + SHIFT + P
screenshots
Grid Layout CSS
Non accessible text
Performances & css coverage
Logs
Timer
console.time('timerSample');
this.longTimeMethod().then(_ => {
console.timeEnd('timerSample');
});Profiler
console.profile('profileSample');
this.longTimeMethod().then(_ => {
console.profileEnd('profileSample');
});Table
console.table([{a:1, b:2, c:3}, {a:"foo", b:false, c:undefined}]);
console.table([[1,2,3], [2,3,4]]);
function Person(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
console.table({
mother: new Person("Susan", "Doyle", 32),
father: new Person("John", "Doyle", 33),
daughter: new Person("Lily", "Doyle", 5),
}, ["firstName", "lastName", "age"]);Group
console.group('A group label');
console.log('a log under the group');
console.info('a second log');
console.groupEnd()
Debug Javascript
Break point inline
console.table([
{first: 'John', last: 'Doe', age: 25},
{first: 'Jane', last: 'Doe', age: 25},
{first: 'Jean-François', last: 'Garreau', age: 34},
{first: 'Julien', last: 'Landure', age: 34}])
.filter((person) => person.age > 30)
.map((person) => {
return{ name: `${person.firstName} ${person.lastName}`}
});
Click Me !
Merci
Jean-François Garreau
GDG Nantes Leader & Ingénieur Lucca
@jefbinomed
Crédits : The noun project
Dinosoft Labs / Lemon Liu / Souvik Maity / Gonzalo Bravo / Miguel C Balandrano
What's new in Devtools
2018 @ SnowCamp