To learn web programming well,
you should be eager to hack some well-designed web pages or sites. In this way, you may learn details from real cases.
- UI Design: how webmaster design a good-look page?
- Tool Integration: how HTML, CSS, JS, jQuery, ... are seamlessly integrated into the page?
- Geek Techniques: how websites design and protect their pages, e.g. ban the "right-click"?
- Commercial Operations: how Ads contents are put to interact with the page and users?
- ...
 |
| https://developers.google.com/chrome-developer-tools/ |
Current browsers support developer tool to debug web programs. Search "
developer tool f12" to get all browsers DevTools information.
- Chrome DevTools: The Chrome Developer Tools (DevTools for short) are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript breakpoints, and get insights for code optimization.
- Introduction to F12 Developer Tools (Microsoft IE)
Let's give you a motivation to learn "
F12". For example, you like a page content about "
creative name card" and want to save it in your note (e.g. OneNote, Evernote, ...).
However, the "mouse select content (left-click and drag to select)" was locked within this page. You are using Chrome browser, but the page content must be saved into OneNote.
- Based on heuristics: Open this page with IE / Right-click mouse / Send to OneNote. Then, modify the content and remove noisy blocks, such as Ads and related info.
In this way, you just solved the problem without anything been learned from the case. Try to solve problems like a programmer (or a geek, a nerd, ...). Open the page "
creative name card" within Chrome and press "F12". You'll see the DevTool show in the bottom of the page. Click "
Dock to main windows" to move the window from bottom to the right-hand site as the figure.
Then browsing the DOM tree from <body> to its nested <div>, the content block is gradually shrunk to smaller block.
 |
| TEEPR: the content associated with selected HTML element is highlighted. |
After tracing the DOM tree into the nested
<div>, the minimal content block about "
the main article" seems be found easily.
 |
| <div id="content"> seems to be the minimal content block. |
Scroll the page to the end of the main article and browse into nested
<div> of
<div id="content">, more specific block
<article class="article"> was found.
 |
| <article class="article"> is the minimal content block in this case. |
What are learned from the tracing effort?
- Most websites really use <div> to layout web pages.
- Several HTML tags have specific functions, e.g. <article> presents main article, <head> , <meta> and <title> are repeatedly employed to show title in the main content block.
- Javascript codes are frequently used to implement functions for presentation and interaction.
- Try to observe more ...
Right-click on "
<article class="article">" and copy as HTML, then paste to editor and save as .html file.
 |
| HTML source code of the element: <article class="article"> |
The partial source code result in abnormally rendering page, especially for the wrong charset (without correct encoding, usually we use "
utf-8").
 |
| The browser-rendering result of the pure code "<article class="article">" |
Usually, "charset" is defined in
<html>.<head>.<meta charset="utf-8">, many JS codes are also defined in the block
<html>.<head>. Therefore, we "right-click and save as HTML" on the
<html>.<head> node, add the code into the .html file.
 |
| Add HTML source code of the first <head> element |
Now, the page was correctly rendered, and all the content can be selected by mouse click-and-drag.
 |
| It looks normal after adding <head> source codes. |
 |
| "Click, drag and select" is workable now. |
Many websites simply protect their media contents (e.g. images and videos) with
HTTP referer (originally a misspelling of referrer), so that some images can not be presented in this .html file (cached page). Adding the following code will solve this problem.
<base href="the url of original page" target="_blank">
 |
| <base> tag is useful to render cached pages from local web server. |
Consequently, we can learn diverse facets of techniques from tracing web source codes through "F12". Obviously, parsed results of CSS, JS, etc. are visible from DevTools. Tracing all HTTP requests of a page is also convenient.
 |
| Debugging CSS properties values |
 |
| Network status and response for each request |
Try to like "F12", be patient to trace codes and debug errors, and become a professional web programmer.
No comments :
Post a Comment