Simple DevTools
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 - 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
Developer | Dee Gill |
Username | deegill |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 2,511 Kb |
Views | 40,480 |
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!
Name | Size |
Flex nav css-tricks demo | 2,022 Kb |
Stacked bar chart - HighchartsJS | 2,217 Kb |
Revenue dashboard v1 | 5,782 Kb |
Flexbox | 2,555 Kb |
Data toggled off by default | 1,553 Kb |
Boxes - Duckett example | 2,374 Kb |
Flex-nav opposite aligned | 1,543 Kb |
Datepicker - jQuery UI | 1,525 Kb |
Testing colors | 1,515 Kb |
Signin Template for Bootstrap | 1,877 Kb |
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!
Name | Username | Size |
Mobile Sub Menu Concept | Berdejitendra | 2,790 Kb |
Loading... | Adamjacob | 2,384 Kb |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
Login with flip 3d animation | Mariusbalaj | 3,014 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Birthday Party Starter | Aussieyang | 1,629 Kb |
CSS Social Media Icon | TychoBlender | 3,871 Kb |
Blockquote design | Sjmcpherson | 1,863 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
Pure CSS Dial | Lukewatts | 3,018 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!