![]() Right-click on the button and select “Inspect”:ĭouble-click on the value of the “background-image” property on the right, that is linear-gradient(#fecc4c,#ffac33).Ĭhange the colors to #2ecc71,#2ecc72 and hit ENTER: Let’s change the background of the “Get started (it’s free)” button to my favorite color – #2ecc71. How to Change Styles with the Inspect Tool You can see the text has been changed to “Build real-world projects”. Type in “Build real-world projects” and hit ENTER: In this case, it's the “Build projects” text:ĭouble-click on the “Build projects” text: To do this, right-click on the element you would like to change and click “Inspect”. You can change the text contents of a website with the Inspect tool.Īs an example, I’m going to change the “Build projects” text on the landing page to “Build real-world projects”. How to Manipulate the Elements of a Website with the Inspect Tool The source code will open and the element will be highlighted for you, like this: In this case, I will right-click on the “Learn to code – for free” text on the landing page. To inspect any element you see on a website, whether it's text, a button, a video, or an image, right-click on the element and click “Inspect”. How to Inspect Specific Elements on a Website If you are on Mac, press Command + SHIFT + C. You can open the Inspect element tool on Linux by pressing CTRL + SHIFT + C or F12 on Windows. How Do I Open Inspect Element in Chrome with the Keyboard? You can drag these tabs around and place them wherever you want: You will then get access to the tabs of the developer tools such as Elements (the HTML and CSS that makes up the website), Console with which you can run JavaScript, Sources, and many more. Then hover over “More tools” and select “Developer tools”: To open the Chrome Developer Tools, click the vertical dots at the top-right corner of your browser: I'll be using to show you how things work with the Inspect tool. I will also show you how you can manipulate the elements of a website by changing the texts and styles. In this article, you will learn how to open the Chrome Developer Tools so you can get access to the Inspect feature, and how to inspect specific elements on a website. You don’t even need to be a developer at all to use it. The good news is that you don’t need to be the developer of the website to use this powerful tool as it is available to users as well. If you’re a beginner in web development, the Inspect tool is a useful feature you can take advantage of to learn about how websites are built, the fonts, icons, and plugins used, and even who made the website. This is why a lot of developers use the Inspect tool for debugging purposes. You can take things further by changing the elements and styles that make up the website – that is, the HTML, CSS, and JavaScript code of the website. It’s an important part of Chrome Developer Tools that you can use to check the source code of any website.īut it doesn’t end there. Once you are at that site, find the search field within the site and perform a search for any word, such as the word “test.The Inspect Element feature of the Google Chrome browser is a powerful yet easy-to-use tool. This is a one-time step that will save you time in the future, so bear with me here. To find the search query URL that you will need to enter in the “ URL with %s in place of query” field, first go to the website you want to add a search shortcut. After you fill out the text fields, click Add. Fill in all the fields for the search engine name, shortcut, and the new query URL.Ħ. To the right of “Site search,” click Add.ĥ. On the left, click Search engine, then Manage search engines and site search.Ĥ. ![]() At the top right, click the 3-dot “More” menu, then click on Settings.ģ. I will explain in the next section how I arrived at that specific URL.Ģ. In the case of “Chrome Unboxed,” my query will be “ “. URL with %s in place of query: Enter the URL for the site’s results page, and use “%s” where the query would go.In the case of “Chrome Unboxed,” I will choose the initials “ CU“ Shortcut: Enter the text shortcut you want to use for that site’s search.Search engine: Enter a label or name for the website.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |