Christian Heilmann codepo8

Code Europe: Increasing developer effectivity by merging browser tooling and editors

Microsoft Edge DevTools documentation overview
Can I use? browser compatibility and support charts
DevTools inspect tool
DevTools Elements Tool
DevTools CSS Grid Inspection
DevTools Font Editor
DevTools Issues tool
Filtering Issue Reports

Resources for "The better together story of Edge DevTools"

We'd love you to help us to spread the message of this idea, so if you need anything (screencasts, videos, help to write blog posts), feel free to contact Chris Heilmann.

This talk/presentation

Slides
Video

Materials to watch/read/send to people

"7 Developer Tools secrets that shouldn't be secrets" resources

Slides

The Slides

Console

Cheating like a pro – a few tools to get you pixeling and converting for C64

Slides as PDF

Demos

The Trooper by Carrion/Bonzai
The Tropper making of on YouTube
Project Argon 3 colour logo by rexbeng (amazing dithering example)
Digital Talk Logo

The Slides of the talk are here

Get the Slides of the presentation on noti.st

Emulation tools in Developer Tools allow you to simulate different mobile devices and network states (offline, bad connectivity and so on...)
Playwright is a npm package to remotely and headlessly test Chromium, WebKit and Gecko at the same time.
Edge Developer Tools for VS Code is an extension that embeds the developer tools inside Visual Studio code, making sure you don't need to switch contexts.
The issues pane in Browser Developer Tools doesn't only display problems sorted by category, but also gives context and "learn more" links.
A quick survey to tell us what you think about the things shown here and h

Back to basics resources

A long Twitter thread about how strange Facebook's HTML is with lots of arguments about generating HTML vs. readability of source code and performance
Playwright is a Node.js module that allows you to remotely drive Chromium, Firefox and Webkit browsers. Great for automated testing.

My pet project: CSDB Preview Bookmarklet

CSDB - The Commodore 64 Scene Database - like IMDB, but for Commodore 64 Demoscene stuff - not changed since 1997 or so and my inspiration to do something about that.
The CSDB Preview Bookmarklet adds a preview into this page

	const e = [
	'10 PRINT "BBC Developer Portal"
	20 GOTO 10',
	"THE HITCHHIKER'S GUIDE TO THE GALAXY
	Infocom interactive fiction - a science fiction story
	Copyright (c) 1984 by Infocom, Inc. All rights reserved.
	Release 59 / Serial number 851108
	You wake up. The room is spinning very gently round your head. Or at least it would be if you could see it which you can't.
	It is pitch black.
	>turn on lights

	let shown = false;
	let currentindex = 0;
	let bigdisp = document.createElement('div');
	document.body.appendChild(bigdisp);
	let sources = [...document.querySelectorAll('img')].map(i => i.src)
	let all = sources.length;
	bigdisp.style.zIndex = 10;
	bigdisp.style.position = 'fixed';
	bigdisp.style.right = '20px';
	bigdisp.style.left = '20px';