{"id":61405,"date":"2024-02-13T07:25:00","date_gmt":"2024-02-13T12:25:00","guid":{"rendered":"https:\/\/memberpress.com\/docs\/using-your-browsers-developer-tools\/"},"modified":"2024-02-13T17:19:22","modified_gmt":"2024-02-13T22:19:22","slug":"using-your-browsers-developer-tools","status":"publish","type":"ht_kb","link":"https:\/\/memberpress.com\/es\/docs\/using-your-browsers-developer-tools\/","title":{"rendered":"Uso de las herramientas de desarrollo del navegador"},"content":{"rendered":"

\u00bfSientes el poder?<\/h2>\n

\n\t Every major internet browser that you use has what is called a set of Developer Tools. This includes Google Chrome, Safari, Firefox and Internet Explorer. So, with all of those options it makes it really easy to utilize a set of Developer Tools to accomplish some pretty cool things! On this page I\u2019ll be using the Developer Tools of Google Chrome that is accessed by right clicking > Inspect (for a brief overview of the Chrome DevTools click aqu\u00ed<\/a>). Below are some basic points as to what you can accomplish with your browser\u2019s developer tools and when they may become useful to you.<\/p>\n

Compruebe los errores de la consola para averiguar por qu\u00e9 algo puede no estar funcionando correctamente en su sitio.<\/h4>\n

\n\t If you\u2019re finding that content on your page isn\u2019t loading right or something seems \u2018off\u2019, then having the ability to check any local errors that may be happening when loading a page is essential. To start, you\u2019ll want to open the Developer Tools in your browser and navigate to the Console tab. Once there, enable the option to \u201cPreserve log\u201d near the top under the main tabs and hit refresh if no information is showing.<\/p>\n

\n\t After you\u2019ve done that, any error messages will appear. If you are unsure as to what an error message might mean or how to address it then it will be worth your time to read this article aqu\u00ed<\/a>. If you\u2019re still unsure how to proceed, then please send us a screen shot of what you\u2019re seeing with a brief explanation of what\u2019s not working in a ticket de asistencia<\/a>.<\/p>\n

Adjust or edit your CSS styling and see how it\u2019ll affect your site before saving the edits in your theme or plugin.<\/h4>\n

\n\t If you don\u2019t like how your theme or MemberPress is displaying its CSS Styling, o<\/strong> if it isn\u2019t showing up right, then WordPress makes it pretty easy to edit that with a third party plugin. We recommend that you use the Plugin CSS personalizado sencillo<\/a>pero tambi\u00e9n hay otras opciones si se hace un simple busque en<\/a> for custom css WordPress plugins. The idea with these types of plugins is that you can create any custom CSS, paste it into the plugin and it will be applied. If you can narrow the CSS down to your theme, then most themes have a place where you can add custom CSS, so ask your theme developer about that if you\u2019re unsure where to find it.<\/p>\n

\n\t For this example, let\u2019s say that I would like the titles for the fields on my MemberPress registration form to be a little bigger than what they are here:<\/p>\n

<\/p>\n

\n\t La forma m\u00e1s sencilla de hacerlo es hacer clic con el bot\u00f3n derecho del rat\u00f3n directamente sobre el elemento que desea editar. As\u00ed que si hago clic derecho en uno de esos t\u00edtulos y luego haga clic en inspeccionar elemento que se ver\u00e1 as\u00ed:<\/p>\n

<\/p>\n

You\u2019ll notice that when I did that, the grey highlighted section in the developer tools is what is directly related to that form label. Here we are looking for the div class, which will tell us what the CSS class is that is being called and used to display the text. When I hover over the div class it will highlight in blue the particular item that it is affecting, so this is a good way to verify that you\u2019re getting the right class. The class for this is mp-form-label<\/strong> and while in this article we won\u2019t discuss too much the details of how CSS works (but if you would like to learn more about CSS, aqu\u00ed<\/a> es un buen lugar para empezar), s\u00f3lo s\u00e9 que para este ejemplo para hacer el texto m\u00e1s grande que tendr\u00eda que introducir esto en el CSS Custom Manager Plugin:<\/p>\n

<\/p>\n

\n\t A couple a key things to note here are that you need to make sure to start each class with a \u201c.\u201d (dot), wrap the styling with \u201c{}\u201d (braces), and it\u2019s always good practice to include an Importante<\/strong> variable. La raz\u00f3n por la que puede ser necesario incluir la variable Importante<\/strong> variable is because more often than not when adding custom CSS you\u2019ll be overriding existing CSS, and that should ensure that your custom CSS is displayed instead. Here is what that edit would look like:<\/p>\n

<\/p>\n

Check what server your content is being loaded over when it\u2019s not loading correctly.<\/h4>\n

\n\t Sometimes you\u2019ll find that one particular part of your site isn\u2019t loading correctly, like files that are being protected with custom URI rules. This is generally caused when the content is being loaded by a server other than Apache, like NGINX which is a common problem causer. To verify this, what you\u2019ll need to do is open the Developer Tools and then go to the Network tab. If you see nothing, then you may need to refresh the page, but otherwise you\u2019ll see a list of all the file locations that were used to load the page. Scroll down until you find the file location that is pulling the content that isn\u2019t loading correctly (you\u2019ll usually know which one it is because it will have some type of c\u00f3digo de error<\/a> on the status) and click on the link. This will pull up various information including the status code, but here you\u2019ll want to look under the heading \u201cResponse Headers\u201d like what you can see here:<\/p>\n

<\/p>\n

\n\t Here you will notice that the content was loaded over Apache, but again, if it\u2019s something else and you\u2019re having an issue, you\u2019ll need to make a change. Specifically, you need to contact your host server and see if they can pass requests for those file types on to Apache for handling instead of NGINX.<\/p>","protected":false},"excerpt":{"rendered":"

Can You Feel the Power? Every major internet browser that you use has what is called a set of Developer Tools. This includes Google Chrome, Safari, Firefox and Internet Explorer. So, with all of those options it makes it really easy to utilize a set of Developer Tools to accomplish some pretty cool things! On [\u2026]<\/p>\n","protected":false},"author":62252,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_strive_editorial_status":"not-started","_strive_copy_of":0,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","_FSMCFIC_featured_image_caption":"","_FSMCFIC_featured_image_nocaption":"","_FSMCFIC_featured_image_hide":"","_strive_checklists":"\"\"","_strive_active_checklist":"62291e2bb2422","footnotes":""},"ht-kb-category":[1314],"ht-kb-tag":[],"class_list":["post-61405","ht_kb","type-ht_kb","status-publish","format-standard","ht_kb_category-miscellaneous","entry","has-post-thumbnail"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t