Simple DevTools

Developer
Dee Gill
Size
2,511 Kb
Views
40,460

How do I make an simple devtools?

What is a simple devtools? How do you make a simple devtools? This script and codes were developed by Dee Gill on 14 October 2022, Friday.

Simple DevTools Previews
IQ Test

Simple DevTools - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple DevTools</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head>
<title>Intro to DevTools</title>
</head>
<body>
<h1>Introduction to Chrome Developer Tools </h1>
<input id="color" type="text" placeholder="Pick a color to change the background..."/>
<div class="elements"> <h3 class="panel">Elements Panel:</h3> <h4>DOM & CSS modification and debugging.</h4> <li class="panel_bullet">Styles</li> <li class="panel_bullet">Computed Styles</li> <li class="panel_bullet">Metrics</li>
</div>
<div class="console"> <h3 class="panel">Console Panel:</h3> <h4>Live JavaScript environment.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies tincidunt nisl, quis tincidunt tortor adipiscing at. Nam sit amet ornare eros. Sed eget tempus dolor. Curabitur lacinia elementum placerat. Curabitur eget magna ac dolor placerat vulputate eu quis arcu. Quisque aliquet diam ut nisl ultrices vehicula. Nullam ac nisl eu augue consectetur pellentesque et vel arcu. Morbi ullamcorper pharetra mi, ut lacinia sem eleifend nec.</p>
</div>
<div class="resources"> <h3 class="panel">Resources Panel:</h3> <h4>Local storage and resources.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies tincidunt nisl, quis tincidunt tortor adipiscing at. Nam sit amet ornare eros. Sed eget tempus dolor. Curabitur lacinia elementum placerat. Curabitur eget magna ac dolor placerat vulputate eu quis arcu. Quisque aliquet diam ut nisl ultrices vehicula. Nullam ac nisl eu augue consectetur pellentesque et vel arcu. Morbi ullamcorper pharetra mi, ut lacinia sem eleifend nec.</p>
</div>
<div class="network"> <h3 class="panel">Network Panel:</h3> <h4>HTTP request debugging.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies tincidunt nisl, quis tincidunt tortor adipiscing at. Nam sit amet ornare eros. Sed eget tempus dolor. Curabitur lacinia elementum placerat. Curabitur eget magna ac dolor placerat vulputate eu quis arcu. Quisque aliquet diam ut nisl ultrices vehicula. Nullam ac nisl eu augue consectetur pellentesque et vel arcu. Morbi ullamcorper pharetra mi, ut lacinia sem eleifend nec.</p>
</div>
<div class="sources"> <h3 class="panel">Sources Panel:</h3> <h4>JavaScript debugging.</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies tincidunt nisl, quis tincidunt tortor adipiscing at. Nam sit amet ornare eros. Sed eget tempus dolor. Curabitur lacinia elementum placerat. Curabitur eget magna ac dolor placerat vulputate eu quis arcu. Quisque aliquet diam ut nisl ultrices vehicula. Nullam ac nisl eu augue consectetur pellentesque et vel arcu. Morbi ullamcorper pharetra mi, ut lacinia sem eleifend nec.</p>
</div>
<div class="timeline"> <h3 class="panel">Timeline Panel:</h3> <h4>Browser performance</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies tincidunt nisl, quis tincidunt tortor adipiscing at. Nam sit amet ornare eros. Sed eget tempus dolor. Curabitur lacinia elementum placerat. Curabitur eget magna ac dolor placerat vulputate eu quis arcu. Quisque aliquet diam ut nisl ultrices vehicula. Nullam ac nisl eu augue consectetur pellentesque et vel arcu. Morbi ullamcorper pharetra mi, ut lacinia sem eleifend nec.</p>
</div>
</body> <script src="js/index.js"></script>
</body>
</html>

Simple DevTools - Script Codes CSS Codes

body { background: #333 url(/images/classy_fabric.png); font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif; font-size: 15px; line-height: 1.4; padding: 10px 50px 200px;
}
input { position:relative; top:50px; right:55px; left: 80%; border-radius: 5px; width: 20%; height: 24px;
}
.panel { text-decoration: underline;
}
div { background: white; margin: 0 0 30px 0; padding: 5px 5px 10px 20px ;
}
h1 { color: white;
}
h3 { margin: 5px 0px 5px 0px;
}
h4 { margin: 8px 0px 8px 0px;
}
p { margin: 0px;
}
li { padding-left: 10px;
}

Simple DevTools - Script Codes JS Codes

function changeBodyBackgroundColor(event) { var bodyEl = document.getElementsByTagName('body')[0]; var color = event.target.value; bodyEl.style.background = color;
}
var inputEl = document.getElementById('color');
inputEl.onkeyup = changeBodyBackgroundColor
Simple DevTools - Script Codes
Simple DevTools - Script Codes
Home Page Home
Developer Dee Gill
Username deegill
Uploaded October 14, 2022
Rating 3
Size 2,511 Kb
Views 40,460
Do you need developer help for Simple DevTools?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dee Gill (deegill) Script Codes
Name
Boxes - Duckett example
Vertical bar graph
Horizontal bar graph
Flex-nav opposite aligned
Signin Template for Bootstrap
Editable Invoice - In Euros
Tables
Flexbox
Testing colors
Data toggled off by default
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!