If part of your desktop is showing while YouTube is in full-screen mode, press F11 (Windows) or Command + Shift + F (Mac) to place Google Chrome in full-screen mode. This may expand the YouTube window to fill the screen. 4 Close and re-open Chrome before trying again. Mac: Press ⌘ and +. Chrome OS: Press Ctrl and +. Make everything smaller: Windows and Linux: Press Ctrl and –. Mac: Press ⌘ and –. Chrome OS: Press Ctrl and –. Use full-screen mode: Windows and Linux: Press F11. Mac: Press ⌘ + Ctrl + f. Chrome OS: At the top of your keyboard, press the full-screen key This key is also called F4. Available for Windows, Mac, and Linux, Google Chrome is the most widely used desktop browser in the world. Since its launch in 2008, Chrome has expanded to Android, iOS, and is the.

Before writing more complex code, let’s talk about debugging.

Debugging is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools – a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.

We’ll be using Chrome here, because it has enough features, most other browsers have a similar process.

The “Sources” panel

Your Chrome version may look a little bit different, but it still should be obvious what’s there.

• Open the example page in Chrome.
• Turn on developer tools with F12 (Mac: Cmd+Opt+I).
• Select the Sources panel.

Here’s what you should see if you are doing it for the first time:

The toggler button opens the tab with files.

Let’s click it and select hello.js in the tree view. Here’s what should show up:

The Sources panel has 3 parts:

1. The File Navigator pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
2. The Code Editor pane shows the source code.
3. The JavaScript Debugging pane is for debugging, we’ll explore it soon.

Now you could click the same toggler again to hide the resources list and give the code some space.

Console

If we press Esc, then a console opens below. We can type commands there and press Enter to execute.

After a statement is executed, its result is shown below.

For example, here 1+2 results in 3, and hello('debugger') returns nothing, so the result is undefined:

Breakpoints

Let’s examine what’s going on within the code of the example page. In hello.js, click at line number 4. Yes, right on the 4 digit, not on the code.

Congratulations! You’ve set a breakpoint. Please also click on the number for line 8.

It should look like this (blue is where you should click):

A breakpoint is a point of code where the debugger will automatically pause the JavaScript execution.

While the code is paused, we can examine current variables, execute commands in the console etc. In other words, we can debug it.

We can always find a list of breakpoints in the right panel. That’s useful when we have many breakpoints in various files. It allows us to:

• Quickly jump to the breakpoint in the code (by clicking on it in the right panel).
• Temporarily disable the breakpoint by unchecking it.
• Remove the breakpoint by right-clicking and selecting Remove.
• …And so on.

Right click on the line number allows to create a conditional breakpoint. It only triggers when the given expression is truthy.

That’s handy when we need to stop only for a certain variable value or for certain function parameters.

Debugger command

We can also pause the code by using the debugger command in it, like this:

That’s very convenient when we are in a code editor and don’t want to switch to the browser and look up the script in developer tools to set the breakpoint.

Pause and look around

In our example, hello() is called during the page load, so the easiest way to activate the debugger (after we’ve set the breakpoints) is to reload the page. So let’s press F5 (Windows, Linux) or Cmd+R (Mac).

As the breakpoint is set, the execution pauses at the 4th line:

Please open the informational dropdowns to the right (labeled with arrows). They allow you to examine the current code state:

1. Watch – shows current values for any expressions.

   You can click the plus + and input an expression. The debugger will show its value at any moment, automatically recalculating it in the process of execution.

2. Call Stack – shows the nested calls chain.

   At the current moment the debugger is inside hello() call, called by a script in index.html (no function there, so it’s called “anonymous”).

   If you click on a stack item (e.g. “anonymous”), the debugger jumps to the corresponding code, and all its variables can be examined as well.

3. Scope – current variables.

   Local shows local function variables. You can also see their values highlighted right over the source.

   Global has global variables (out of any functions).

   There’s also this keyword there that we didn’t study yet, but we’ll do that soon.

Tracing the execution

Now it’s time to trace the script.

There are buttons for it at the top of the right panel. Let’s engage them.

Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.

Here’s what we can see after a click on it:

The execution has resumed, reached another breakpoint inside say() and paused there. Take a look at the “Call Stack” at the right. It has increased by one more call. We’re inside say() now.

Run the next statement. If we click it now, alert will be shown.

Clicking this again and again will step through all script statements one by one.

Similar to the previous “Step” command, but behaves differently if the next statement is a function call. That is: not a built-in, like alert, but a function of our own.

The “Step” command goes into it and pauses the execution at its first line, while “Step over” executes the nested function call invisibly, skipping the function internals.

The execution is then paused immediately after that function.

That’s good if we’re not interested to see what happens inside the function call.

That’s similar to “Step”, but behaves differently in case of asynchronous function calls. If you’re only starting to learn JavaScript, then you can ignore the difference, as we don’t have asynchronous calls yet.

For the future, just note that “Step” command ignores async actions, such as setTimeout (scheduled function call), that execute later. The “Step into” goes into their code, waiting for them if necessary. See DevTools manual for more details.

Continue the execution and stop it at the very last line of the current function. That’s handy when we accidentally entered a nested call using , but it does not interest us, and we want to continue to its end as soon as possible.

Chrome F11 Mac Pro

That button does not move the execution. Just a mass on/off for breakpoints.

When enabled, and the developer tools is open, a script error automatically pauses the execution. Then we can analyze variables to see what went wrong. So if our script dies with an error, we can open debugger, enable this option and reload the page to see where it dies and what’s the context at that moment.

Right click on a line of code opens the context menu with a great option called “Continue to here”.

That’s handy when we want to move multiple steps forward to the line, but we’re too lazy to set a breakpoint.

Logging

To output something to console from our code, there’s console.log function.

For instance, this outputs values from 0 to 4 to console:

Regular users don’t see that output, it is in the console. To see it, either open the Console panel of developer tools or press Esc while in another panel: that opens the console at the bottom.

If we have enough logging in our code, then we can see what’s going on from the records, without the debugger.

Summary

As we can see, there are three main ways to pause a script:

1. A breakpoint.
2. The debugger statements.
3. An error (if dev tools are open and the button is “on”).

When paused, we can debug – examine variables and trace the code to see where the execution goes wrong.

There are many more options in developer tools than covered here. The full manual is at https://developers.google.com/web/tools/chrome-devtools.

The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.

Oh, and also you can click at various places of dev tools and just see what’s showing up. That’s probably the fastest route to learn dev tools. Don’t forget about the right click and context menus!

Want to hide all the distractions on your screen while browsing on Google Chrome? The Full Screen feature in Chrome will help you.

If you enable full screen on Chrome, all the distractions, such as your bookmarks, any other open tabs and your operating system’s taskbar will be hidden completely. Want to try it right now? No worry. Read on and find how…

How to enable & disable full screen on Chrome?

We’ve put together all the tips we found to enable & disable full screen in Chrome. You can read it out and select the method convenient for you.

Chrome F11 Mac Os

Method 1: Using the Chrome menu

Chrome F11 Mac Update

You can activate the full screen mode of Chrome by modify its setting in its menu.

Here’s how you can do it: (These steps applies to both Windows and Mac operating systems.

Click the More options icon on the top right of Chrome. Then click the full screen icon of the Zoom option.

Chrome will then display your current tab as full screen.

Chrome F11 Mac Os

When you want to go back to the regular mode of Chrome, move your mouse cursor onto the top of the screen, then click the pop-up close icon to exit the full screen mode.

Method 2: Using your keyboard

There’re shortcut keys for your to get in the full screen mode of Chrome in both Windows and Mac systems.

If you’re using Windows system, with the tab you want to show as full screen open, press F11 on your keyboard. Chrome will then get into full screen. Once your want to exit the full screen mode, simply press F11 again.

Note: If F11 fails to work on your Windows laptop, press Fn + F11 keys together instead.

If you’re using Mac system, with the tab you want to show as full screen open, press Ctrl + Command + F keys together. And also, press the same keys when you want to exit the full screen mode.

Method 3: More tips for Mac users

If you’re using Mac system, you can click the green circle icon on the top left of your Chrome window to get Chrome into full screen. When you want to get Chrome back to the regular mode, simply click the same green circle icon again.

Chrome F11 Mac Version

That’s all there is to it. Enjoy the full screen mode of Chrome. Feel free to comment below with your own experiences or let me know if you have any questions.