diff --git a/admin/updates/lib/functions.php b/admin/updates/lib/functions.php index 167bd22b4d3..79062bc3084 100755 --- a/admin/updates/lib/functions.php +++ b/admin/updates/lib/functions.php @@ -88,7 +88,7 @@ function buildFile() { $content['source_url'] = $_POST['source_url']; } - if($_POST['tb1_heading']) { + if(isset($_POST['tb1_heading'])) { $content['teaserblocks'] = array( array( 'heading' => $_POST['tb1_heading'], diff --git a/src/_betterbook-devtools.yaml b/src/_betterbook-devtools.yaml index 602e6f9a414..d72b824ac61 100644 --- a/src/_betterbook-devtools.yaml +++ b/src/_betterbook-devtools.yaml @@ -1,6 +1,6 @@ toc: - title: "DevTools" - path: /chrome-devtools/ + path: /web/tools/chrome-devtools/ home: true - title: "Documentation" path: "#docs" diff --git a/src/_includes/head.liquid b/src/_includes/head.liquid index f3ff275bbc6..6dbc2ce9e67 100644 --- a/src/_includes/head.liquid +++ b/src/_includes/head.liquid @@ -14,7 +14,7 @@ {% when 'spotlight' %} {{ page.title }} — Google Web Showcase {% when 'tools' %} - {{ page.title }} — Google Web Tools + {{ page.title }} {% else %} {{ page.title }} — Web Fundamentals {% endcase %} diff --git a/src/_langs/en/tools/chrome-devtools/index.html b/src/_langs/en/tools/chrome-devtools/index.html index 6e4d211d6b6..a80757a40de 100644 --- a/src/_langs/en/tools/chrome-devtools/index.html +++ b/src/_langs/en/tools/chrome-devtools/index.html @@ -1,11 +1,13 @@ --- rss: false layout: devtools -description: "The Chrome DevTools are a set of web authoring and debugging tools built into Google Chrome." +description: "The Chrome DevTools are Chrome's built-in authoring and debugging tool." class: starter-kit title: Chrome DevTools id: chrome-devtools collection: tools +feedName: Google Web Developers +feedPath: feed.xml panels: - title: Elements diff --git a/src/_langs/en/tools/index.html b/src/_langs/en/tools/index.html index 011ae3af4b4..79ac736ca18 100644 --- a/src/_langs/en/tools/index.html +++ b/src/_langs/en/tools/index.html @@ -6,8 +6,8 @@ id: tools collection: web priority: 0 -feedName: Google Web Tools -feedPath: tools/feed.xml +feedName: Google Web Developers +feedPath: feed.xml --- @@ -16,7 +16,7 @@

Get productive.

- Discover our

tools

and kickstart your development. + Discover our 

tools

 and kickstart your development.
WHAT'S NEW
diff --git a/src/_langs/en/updates/2015-08-10-5-tricks-to-use-in-the-console-panel.markdown b/src/_langs/en/updates/2015-08-10-5-tricks-to-use-in-the-console-panel.markdown new file mode 100755 index 00000000000..94f01207ec1 --- /dev/null +++ b/src/_langs/en/updates/2015-08-10-5-tricks-to-use-in-the-console-panel.markdown @@ -0,0 +1,66 @@ +--- +rss: false +layout: update +published: true +title: Five tricks to use in the Console Panel +date: 2015-08-10 +article: + written_on: 2015-08-10 + updated_on: 2015-08-10 +authors: +- umarhansa +collection: updates +type: tip +category: tools +product: chrome-devtools +featured-image: /web/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif +source_name: DevTips +source_url: https://umaar.com/dev-tips/29-five-console-tricks/ +teaserblocks: +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +permalink: /updates/2015/08/10/5-tricks-to-use-in-the-console-panel.html +--- +Five tricks to use in the Console Panel + +#### Use the inspect() command to jump straight to a passed-in DOM node + +{% highlight javascript %} +inspect($('p')) +{% endhighlight %} + +#### Use the copy() command to copy text to your clipboard + +{% highlight javascript %} +copy(Object.keys(window)) +// stores ["top", "window", "location", "external"... and so on +{% endhighlight %} + +#### Style your console output + +{% highlight javascript %} +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);'); +{% endhighlight %} + +#### Get the values of an object + +{% highlight javascript %} +values({ + one: 1, + two: 2, + three: 3 +}) + +// logs [1, 2, 3] +{% endhighlight %} + +#### Clear the console + +Cmd + K (Ctrl + L on Windows) \ No newline at end of file diff --git a/src/_langs/en/updates/2015-08-10-easily-duplicate-dom-nodes.markdown b/src/_langs/en/updates/2015-08-10-easily-duplicate-dom-nodes.markdown new file mode 100755 index 00000000000..69107c81181 --- /dev/null +++ b/src/_langs/en/updates/2015-08-10-easily-duplicate-dom-nodes.markdown @@ -0,0 +1,42 @@ +--- +rss: false +layout: update +published: true +title: Easily duplicate DOM nodes +date: 2015-08-10 +article: + written_on: 2015-08-10 + updated_on: 2015-08-10 +authors: +- umarhansa +collection: updates +type: tip +category: tools +product: chrome-devtools +featured-image: /web/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png +source_name: DevTips +source_url: https://umaar.com/dev-tips/58-duplicate-dom/ +teaserblocks: +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +permalink: /updates/2015/08/10/easily-duplicate-dom-nodes.html +--- +Duplicate DOM nodes + +These are essentially cut/copy and paste operations. + +You can easily change the DOM without having to edit the HTML as a giant string. + +1. Right click on a node and select Copy. +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). + +You can also Cut (right click > Cut, Cmd + x/Ctrl + x) a DOM node and paste - which has the effect of moving the node. + +Experiment: 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. \ No newline at end of file diff --git a/src/_langs/en/updates/2015-08-10-edit-html-in-the-console-panel.markdown b/src/_langs/en/updates/2015-08-10-edit-html-in-the-console-panel.markdown new file mode 100755 index 00000000000..ae6fc45199d --- /dev/null +++ b/src/_langs/en/updates/2015-08-10-edit-html-in-the-console-panel.markdown @@ -0,0 +1,40 @@ +--- +rss: false +layout: update +published: true +title: Edit HTML in the Console Panel +date: 2015-08-10 +article: + written_on: 2015-08-10 + updated_on: 2015-08-10 +authors: +- umarhansa +collection: updates +type: tip +category: tools +product: chrome-devtools +featured-image: /web/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png +source_name: DevTips +source_url: https://umaar.com/dev-tips/60-console-edit-html/ +teaserblocks: +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +- heading: "" + description: "" + image: "" +permalink: /updates/2015/08/10/edit-html-in-the-console-panel.html +--- +Edit HTML in the Console Panel of DevTools + +The DOM node context menu, which you may recognize from the elements panel, is also present in the console panel. + +
    +
  1. Log a DOM node to the console.
    2. +
  2. Right click on it.
    3. +
  3. Select Edit as HTML or Edit Text.
    4. +
  4. Notice the DOM is updated on the page and also in the Elements Panel.
    5. +
\ No newline at end of file diff --git a/src/_langs/en/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif b/src/_langs/en/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif new file mode 100755 index 00000000000..79d3007df48 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-5-tricks-to-use-in-the-console-panel/five-console-tricks.gif differ diff --git a/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif new file mode 100755 index 00000000000..e1b28d23a82 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/duplicate-dom.gif differ diff --git a/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png new file mode 100755 index 00000000000..270a2de6c78 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/gplus-8f4a2ba4.png differ diff --git a/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/twitter-c6557484.png b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/twitter-c6557484.png new file mode 100755 index 00000000000..38247072821 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-duplicate-dom-nodes/twitter-c6557484.png differ diff --git a/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/console-edit-html.gif b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/console-edit-html.gif new file mode 100755 index 00000000000..93c27382412 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/console-edit-html.gif differ diff --git a/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png new file mode 100755 index 00000000000..270a2de6c78 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/gplus-8f4a2ba4.png differ diff --git a/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/twitter-c6557484.png b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/twitter-c6557484.png new file mode 100755 index 00000000000..38247072821 Binary files /dev/null and b/src/_langs/en/updates/images/2015-08-10-edit-html-in-the-console-panel-of-devtools/twitter-c6557484.png differ