Skip to content
This repository was archived by the owner on Aug 10, 2022. It is now read-only.

Commit 9fca13b

Browse files
jpmedleyjpmedley
committed
Merge pull request #1510 from google/tools_fixes
Fixes to /tools and /tools/chrome-devtools + three new tips
2 parents 68300ea + c5e1bd5 commit 9fca13b

File tree

15 files changed

+157
-7
lines changed

15 files changed

+157
-7
lines changed

‎admin/updates/lib/functions.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ function buildFile() {
8888
$content['source_url'] = $_POST['source_url'];
8989
}
9090

91-
if($_POST['tb1_heading']) {
91+
if(isset($_POST['tb1_heading'])) {
9292
$content['teaserblocks'] = array(
9393
array(
9494
'heading' => $_POST['tb1_heading'],

‎src/_betterbook-devtools.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
toc:
22
- title: "<strong>DevTools</strong>"
3-
path: /chrome-devtools/
3+
path: /web/tools/chrome-devtools/
44
home: true
55
- title: "Documentation"
66
path: "#docs"

‎src/_includes/head.liquid‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
{% when 'spotlight' %}
1515
{{ page.title }} — Google Web Showcase
1616
{% when 'tools' %}
17-
{{ page.title }} — Google Web Tools
17+
{{ page.title }}
1818
{% else %}
1919
{{ page.title }} — Web Fundamentals
2020
{% endcase %}

‎src/_langs/en/tools/chrome-devtools/index.html‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
---
22
rss: false
33
layout: devtools
4-
description: "The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome."
4+
description: "The Chrome DevTools are Chrome's built-in authoring and debugging tool."
55
class: starter-kit
66
title: Chrome DevTools
77
id: chrome-devtools
88
collection: tools
9+
feedName: Google Web Developers
10+
feedPath: feed.xml
911

1012
panels:
1113
- title: Elements

‎src/_langs/en/tools/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
id: tools
77
collection: web
88
priority: 0
9-
feedName: Google Web Tools
10-
feedPath: tools/feed.xml
9+
feedName: Google Web Developers
10+
feedPath: feed.xml
1111
---
1212

1313
<meta itemprop="url" content="https://developers.google.com/web/tools"/>
@@ -16,7 +16,7 @@
1616
<div class="container">
1717
<p class="headliner">Get productive.</p>
1818
<div class="desc">
19-
Discover our <h1>tools</h1> and kickstart your development.
19+
Discover our&nbsp;<h1>tools</h1>&nbsp;and kickstart your development.
2020
<div>
2121
<a class="toolbutton" href="/web/updates/tools">WHAT'S NEW</a>
2222
</div>

‎src/_langs/en/updates/2015-08-10-5-tricks-to-use-in-the-console-panel.markdown‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
rss: false
3+
layout: update
4+
published: true
5+
title: Five tricks to use in the Console Panel
6+
date: 2015-08-10
7+
article:
8+
written_on: 2015-08-10
9+
updated_on: 2015-08-10
10+
authors:
11+
- umarhansa
12+
collection: updates
13+
type: tip
14+
category: tools
15+
product: chrome-devtools
16+
featured-image: /web/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif
17+
source_name: DevTips
18+
source_url: https://umaar.com/dev-tips/29-five-console-tricks/
19+
teaserblocks:
20+
- heading: ""
21+
description: ""
22+
image: ""
23+
- heading: ""
24+
description: ""
25+
image: ""
26+
- heading: ""
27+
description: ""
28+
image: ""
29+
permalink: /updates/2015/08/10/5-tricks-to-use-in-the-console-panel.html
30+
---
31+
<img src="/web/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif" alt="Five tricks to use in the Console Panel">
32+
33+
#### Use the inspect() command to jump straight to a passed-in DOM node
34+
35+
{% highlight javascript %}
36+
inspect($('p'))
37+
{% endhighlight %}
38+
39+
#### Use the copy() command to copy text to your clipboard
40+
41+
{% highlight javascript %}
42+
copy(Object.keys(window))
43+
// stores ["top", "window", "location", "external"... and so on
44+
{% endhighlight %}
45+
46+
#### Style your console output
47+
48+
{% highlight javascript %}
49+
console.log('%cHello world', 'font-size:40px;color:#fff;text-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);');
50+
{% endhighlight %}
51+
52+
#### Get the values of an object
53+
54+
{% highlight javascript %}
55+
values({
56+
one: 1,
57+
two: 2,
58+
three: 3
59+
})
60+
61+
// logs [1, 2, 3]
62+
{% endhighlight %}
63+
64+
#### Clear the console
65+
66+
<kbd class="kbd">Cmd + K</kbd> (Ctrl + L on Windows)

‎src/_langs/en/updates/2015-08-10-easily-duplicate-dom-nodes.markdown‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
---
2+
rss: false
3+
layout: update
4+
published: true
5+
title: Easily duplicate DOM nodes
6+
date: 2015-08-10
7+
article:
8+
written_on: 2015-08-10
9+
updated_on: 2015-08-10
10+
authors:
11+
- umarhansa
12+
collection: updates
13+
type: tip
14+
category: tools
15+
product: chrome-devtools
16+
featured-image: /web/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png
17+
source_name: DevTips
18+
source_url: https://umaar.com/dev-tips/58-duplicate-dom/
19+
teaserblocks:
20+
- heading: ""
21+
description: ""
22+
image: ""
23+
- heading: ""
24+
description: ""
25+
image: ""
26+
- heading: ""
27+
description: ""
28+
image: ""
29+
permalink: /updates/2015/08/10/easily-duplicate-dom-nodes.html
30+
---
31+
<img src="/web/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif" alt="Duplicate DOM nodes">
32+
33+
<em>These are essentially cut/copy and paste operations.</em>
34+
35+
You can easily change the DOM without having to edit the HTML as a giant string.
36+
37+
1. Right click on a node and select <em>Copy</em>.
38+
2. You can paste in your code editor, or for prototyping, you can paste the DOM node elsewhere in the DOM tree. The pasted node is inserted as a child of the currently selected node. In the video, I use the left arrow key to jump to the immediate parent opening tag and paste there (which is what I do in most cases).
39+
40+
You can also Cut (right click &gt; Cut, Cmd + x/Ctrl + x) a DOM node and paste - which has the effect of moving the node.
41+
42+
<em>Experiment:</em> Try adding more links in the header/footer of a site using this copy and paste technique and figure out at which point the layout needs improving.

‎src/_langs/en/updates/2015-08-10-edit-html-in-the-console-panel.markdown‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
rss: false
3+
layout: update
4+
published: true
5+
title: Edit HTML in the Console Panel
6+
date: 2015-08-10
7+
article:
8+
written_on: 2015-08-10
9+
updated_on: 2015-08-10
10+
authors:
11+
- umarhansa
12+
collection: updates
13+
type: tip
14+
category: tools
15+
product: chrome-devtools
16+
featured-image: /web/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png
17+
source_name: DevTips
18+
source_url: https://umaar.com/dev-tips/60-console-edit-html/
19+
teaserblocks:
20+
- heading: ""
21+
description: ""
22+
image: ""
23+
- heading: ""
24+
description: ""
25+
image: ""
26+
- heading: ""
27+
description: ""
28+
image: ""
29+
permalink: /updates/2015/08/10/edit-html-in-the-console-panel.html
30+
---
31+
<img src="/web/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/console-edit-html.gif" alt="Edit HTML in the Console Panel of DevTools">
32+
33+
The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel.
34+
35+
<ol>
36+
<li>Log a DOM node to the console.</li>
37+
<li>Right click on it.</li>
38+
<li>Select Edit as HTML or Edit Text.</li>
39+
<li>Notice the DOM is updated on the page and also in the Elements Panel.</li>
40+
</ol>

‎src/_langs/en/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif‎

1.24 MB
Loading

‎src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif‎

1.03 MB
Loading

0 commit comments

Comments
 (0)